WebSite X5Help Center

 
Roger N.
Roger N.
User

Controlling CSS on HTML embed  en

Autor: Roger N.
Visited 1722, Followers 1, Udostępniony 0  

I am embedding a third party application into my website (its a database) that is able to function from its own URL but I want to put it in a website using Incomdia Web Plus Evo.

The object embeds fine but the formatting is lost (wrong font and centre alignment which should be left) - I am assuming Evo is overwriting the CSS? Can I control the CSS of an embedded item using EVO? 

I am using "one" as the host and I ahve already asked their help but they think the issue is Evo side? Or do they need to do anything on their server? 

Thank You

Posted on the
33 ODPOWIEDZI
Roger N.
Roger N.
User
Autor

I think the solution is witin Step 1 >  statistics and seo and code -> code > Add CSS file to linked HTML codes

The ony issue I have now, although it is now the same font, it is not as sharp/clear for some reason. 

Czytaj więcej
Posted on the from Roger N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

(It > En) ... in addition to following Paul's advice for the LINK,
... if the page that uses the DB resides in your own WEB space, then you could try to incorporate this page into the project with an IFRAME ...

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Roger N.
Roger N.
User
Autor

Hello Gents - I dont really want to share pubically just yet - hopefully I will find time over the weekend to make it more publishable and then will post a link. 

Im not so sure an iFrame is the answer as the DB side is quite dynamic - but I will give it a shot Kol.

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

Kol - The iFrame does not work for me - I cannot get the height to be dynamic (I dont want scroll bars) - any ideas? 

Czytaj więcej
Posted on the from Roger N.
John S.
John S.
User

Hello Roger

You can add some code to adjust the height automatically.

I have an example here : http://bramminginfo.dk/tambours-have.html

A slideshow is put in an iframe. The heght of the iframe is adjusted as the screen is resized. I have made 4 breakpoints but more could be made.

You can see how it is made via Ctrl+U or see this thread ( last posts )

Czytaj więcej
Posted on the from John S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Roger N.
Kol - The iFrame does not work for me - I cannot get the height to be dynamic (I dont want scroll bars) - any ideas? 

(It > En) ... if the DB page resides on the same domain as your site, you could make the height of the IFRAME dynamic ...
... or, if the DB page resides on a domain other than the site, but you can edit the HTML code of the DB page, also in this case the height of the IFRAME could be made dynamic, with EXTRA code ...
.

Hello, ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Roger N.
Roger N.
User
Autor

John / KolAsim, 

I am not really a coder as such - Im quite happy to cut and paste code when told and I can edit it but struggle to develop it. 

Could you post the link to the thread with instructions on how to do please.

As far as I could work out John, this was your code:

</div><div id="imCell_14" class="" data-responsive-sequence-number="9"><div id="imCellStyleGraphics_14"></div><div id="imCellStyleBorders_14"></div><div id="imHTMLObject_165_14" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;"><iframe id="album" src="" width="100%" frameborder="0"></iframe></div></div><div id="imCell_18" class="" data-responsive-sequence-number="10"><div id="imCellStyleGraphics_18"></div><div id="imCellStyleBorders_18"></div><div id="imHTMLObject_165_18" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;"><script> function narrowWin() { var iFrame = document.getElementById('album'); if (window.innerWidth > 1150) { //large screen iFrame.style.height = '570px'; } else if (window.innerWidth > 720){ //narrow screen iFrame.style.height = '400px'; } else if (window.innerWidth > 480){ //narrow screen iFrame.style.height = '310px'; } else { iFrame.style.height = '270px'; } iFrame.src="http://bramminginfo.dk/lokationsbilleder/album.php?a=Varde/TambourHave&p=3&s=4"; }

with this being the key bit for height?....

(window.innerWidth > 1150) { //large screen iFrame.style.height = '570px'; } else if (window.innerWidth > 720){ //narrow screen iFrame.style.height = '400px'; } else if (window.innerWidth > 480){ //narrow screen iFrame.style.height = '310px'; } else { iFrame.style.height = '270px'; }

Czytaj więcej
Posted on the from Roger N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Roger N.
John / KolAsim,  I am not really a coder as such - Im quite happy to cut and paste code when told and I can edit it but struggle to develop it.  Could you post the link to the thread with instructions on how to do please. ... ... ... 

(It > En) ... for the case of my first hypothesis, ... you could settle for this > simple example of mine;
(Ctrl+U   for the code)
... you can learn more >> here...
....
... ... for the case of my second hypothesis, you can study e tap into directly to the source:
http://davidjbradshaw.github.io/iframe-resizer/

.

ciao

.

(I'm not a programmer)

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
John S.
John S.
User

Hello Roger

Sorry - I forgot the link : https://helpcenter.websitex5.com/pl/post/215577

The code is quite simple - it is here :

In the page settings - BODY tag property I have :

onload="narrowWin()" onresize="narrowWin()"

And in the page I  have  ( in a html-object ):

<script>
function narrowWin() {
var iFrame = document.getElementById('album');
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '570px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '400px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '310px';
} else {
iFrame.style.height = '270px';
}
iFrame.src="YourownURL";
}

</script>

You can adjust the heights and screen width to your needs.

The onresize does that when  a user resizes the screen or change mobile from portrait to landscape, then the iframe is adjusted.

You set the src in the iframe to "" ( no content ) and the id of the iframe to album.

If you have problems then a post.

Czytaj więcej
Posted on the from John S.
Roger N.
Roger N.
User
Autor

Thank you Gents, going to have a trail over the weekend - will report back

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

I just cannot get this to work - I must be missing a trick somewhere? 

<script>
function narrowWin() {
var iFrame = document.getElementById('');
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '570px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '400px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '310px';
} else {
iFrame.style.height = '270px';
}
iFrame.src="https://getkonnected.knack.com/korc-mtb-registration#member-home-page/";
}

</script>

Czytaj więcej
Posted on the from Roger N.
John S.
John S.
User

The code must be in the "HTML code" section/tab in the html object.

Czytaj więcej
Posted on the from John S.
John S.
John S.
User

AND you have to have a html object where you specify the iframe

Example

<iframe id="album" src="" width="100%" frameborder="0"></iframe>

Czytaj więcej
Posted on the from John S.
Roger N.
Roger N.
User
Autor

John, 

sorry to drag this out - can you step by step me on this bit please (Im learning fast and it really is appreciated!)...

AND you have to have a html object where you specify the iframe

Example

<iframe id="album" src="" width="100%" frameborder="0"></iframe>

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

John, 

Worked it out - thank you so much!

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

If only I could get rid of those pesky slider bars from the iFrame this would be the perfect solution

Czytaj więcej
Posted on the from Roger N.
John S.
John S.
User

You mean the scroll bar?

The scroll bars should only be present when the iframe is specified "bigger" than the space you make available.

Do you have a link?

Czytaj więcej
Posted on the from John S.
Roger N.
Roger N.
User
Autor

https://www.getmyapp.co.uk/KORC-MTB/

I made the height oversized (12000pix) as some pages will always be taller than others - the ideal would have been iframe=100%.

Turns out there is a bigger problem, within the database software I am using, when I have used a "pop up" page (press 'book into site') the pop ups do not work

This is the page as normal (not iframes) https://getkonnected.knack.com/korc-mtb-registration#member-home-page/

Temp login: 

user: ***
pass: temp

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

The pop up window only seems to be a problem on mobile devices. 

Its back to my original comment of just wishing I could embedd/iframe without it affecting my original CSS

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

found another bug (for me) I really liked the right click protection - that function does not work in iframes - Im sure there is an answer somewhere! 

Czytaj więcej
Posted on the from Roger N.
John S.
John S.
User

email addresses must be written in a special way - if not - then they will be seen as ***

For that reason I have not been able to see your system.

Example : your(@)email.com

Czytaj więcej
Posted on the from John S.
Roger N.
Roger N.
User
Autor

ahh sorry

user(@)webx5.com

Czytaj więcej
Posted on the from Roger N.
John S.
John S.
User

Hello Roger

It seems that you have the height much too high.

You have to adjust the height so your iframe wont force the vertical slider/scrollbar to be shown.

Then you must for the differebt viewports set the height in the script so it matches that the 3. software don't also make a scrollbar.

If you need a good web calendar with booking features you could also look at the Luxcal calendar.

Link here : http://calendarforum.dk/  and here : http://www.luxsoft.eu/index.php?pge=demos

This is easy to manage and easy to implement and integrate with the X5.

See some features here : http://www.luxsoft.eu/index.php?pge=dtail

Czytaj więcej
Posted on the from John S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Roger N.
The pop up window only seems to be a problem on mobile devices.  Its back to my original comment of just wishing I could embedd/iframe without it affecting my original CSS

(It > En) ... ... opening the external page in PopUp window could be a simple solution ...
... the external page is on the same server as your site ...?...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Roger N.
Roger N.
User
Autor

John/Kolasim, 

Thank you for perservering with me on this. Its appreciated. 

John, 

My issue is that many of the pages from my database can be different heights, Ive just provided a snap shopt, some of my databases have hundreds of pages. some are just simple forms, others are tables that might have 10 lines or 100 lines. I need the iframe to be dynamic but because I could not do that I set it oversize. 

Thanks for the suggestion, but the calendar function within knack is extremely poweful and incorportated into the main database - I can use it to display events depending on other conditions amoungst many other things. 

KolAsim, 

The "popup" if from the database pages - its not in the W5 site or host. 

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

Hello John, 

Yes, Ive tried all they mention. 

Where Knack recomend placing <!DOCTYPE html public "-//w3c//dtd html 4.01//en" "https://www.w3.org/tr/html4/strict.dtd">

I get an error message: Erroneous DOCTYPE. Expected. <!DOCTYPE html>.

I just cannot find the answer

Czytaj więcej
Posted on the from Roger N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Roger N.
... ... ... KolAsim,  The "popup" if from the database pages - its not in the W5 site or host. 
 ‪ KolAsim ‪ ‪
... ... ...  (It > En) ... ... opening the external page in PopUp window could be a simple solution ... ...

>>  PopUp  ... .. . .

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
John S.
John S.
User

As KolAsim tell - try the popup.

You could still have it in a menu item in X5. Then you could use the popup or the new page.

For both possibilities you can specify a size for the popup or the window.

It is not integrated into your site - but close.

Czytaj więcej
Posted on the from John S.
Roger N.
Roger N.
User
Autor

Gents, 

The popup looks like the way forward - thank you very much for sticking with me on this

Czytaj więcej
Posted on the from Roger N.
Roger N.
Roger N.
User
Autor

Kolasim, 

I did laugh out loud with your URL 

/trash/korcsport.html#

Made me smile! :-) 

Czytaj więcej
Posted on the from Roger N.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

(It > En)  ... laughing))))) ... is a temporary directory "trash" for superfluous examples that will be automatically deleted after about 24-48 hours ...

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪