Hi, i have simple problem.
if you look at my website on this link
http://www.g-laptops.com/library-x/
you can see that i am using excel embeded spreadsheet. There are two ways i can embed this sheet.
1st way to embed code that excel online generates for me when i want to embed this file to internet..
this way is using iframe and its working. example is on library-x page.
2nd way is that excel online gives you java script which is way batter and more customizablle, but it doesnt work if i embed it to my webstie. I tryed first to paste it to text editor on that website… didnt showed nothing.
Than i tried to create a text widget through page builder and paste text inside.. it wasnt working. The only way this java code to embed my worksheet was working when i created .htm file in notepad ( i copy paste the code to notepad and changed extention of the file to .htm. ) I creted then in wpadmin/menus – new menu as url which goes directly to that uploaded file from notepad. Please have a look how it looks like –
http://www.g-laptops.com/wp-content/uploads/2015/01/FPS-CT101.htm
So now i have two types of this library
1st type is that library is embeded and showed on the page http://www.g-laptops.com/library-x/
This page is showing sidebar and thats what i want. But big problem is that i want this page to be stretched exactly like this page
http://www.g-laptops.com/wp-content/uploads/2015/01/FPS-CT101.htm
The problem with the second stretched page is that its out of my menus, out of my page. Its a custom htm file and i cannot show there no sidebar, no menus, no advertisement, quickchat basicaly nothing.
I tried on LIBRARY-x page to add various codes to play with iframe. They worked for height, no problem. Problem was the width. It feels like every page is locked to certain width and i cannot change it and that iframe wont change to my desired width.
Here is the code i used to stretch the iframe for example
<iframe src="http://www.g-laptops.com/wp-content/uploads/2015/01/FPS-CT101.htm width="6000" height="1500"></iframe>
This code is working with height, but not width. Thats the .htm file i created from notepad pasting that custom java embeding code from excel online.
than i find out i can force to change the width of the page by using this code in custom css
/* Vantage full width expand main container width */
body.responsive.layout-full #page-wrapper #main .full-container {
max-width: 1500px !important;
} this code expanded width of the page by changing the 1500px value to my desired value. Finaly my iframe get wider and it was much better. But than the whole website changed the width and suddenly all my pages and everything was messy and ugly.
So my question is
1st. can i change custom css code to change width of page only for choosen page.. in my example Library-X page? ( thats my test page btw)
2.nd I feel that the embeding java code from excel online will be the best solution to embed and show my data, only problem is that its not working.. ( or i dont know how to fix it) This code is working when is pasted in .htm file and than this file acts like a single menu on my website.
I want that my choosen menu , for example now Library-x will open on my website with the sidebar, it will be iframed or java emebded stretched to full width of size of the worksheet. All other pages will be untouched by this width change.
Is it possible? sorry this is very long, but i wanted you to understand my silly problem. Hope you might help
Mike
Hey Mike
Sorry to hear this isn’t handled yet. I’m sure we can get it sorted second time around :)
1. Yes, for sure, we can definitely set page width for just one page.
/* Test Page*/ body.page-id-679.responsive.layout-full #page-wrapper #main .full-container { max-width: 1500px !important; }If you check the page source, look at the body tag near the top of the page, you’ll see the class I’m grabbing, page-id-679, each page/post has a unique body class like that.
2. Are we sorted on question two by fixing question one?
Hopefully I didn’t miss the point here. I can go over everything again tomorrow when I’m fresher if needs be.
hi i think thats it, have a look at it now :) I think i cannot ask for more, sorted. :) thank you
Looks super Mike, glad we could get that sorted. Let us know if anything comes up in the future.
All the best.
Just did a quick check, I see you set the max width to a big number. We can change that to the following to be a little more slick about it:
body.page-id-679.responsive.layout-full #page-wrapper #main .full-container { max-width: none; width: 100%; }So we’re saying, remove the max-width, don’t place any maximum width on that container and make the container 100% of the width available. So for all those guys out there rocking 27″ displays, they should be able to read this nice and clearly.
yes i like that, its basicaly the same, but more easier and more responsive. Thank you Andrew, you rock !!! :) … maybe i want to ask one more question which might be impossible. Around my worksheet library on right side i have arow up and down, and on bottom arrow left and right. I was wondering if is possible to have thise movement tabs also on the top of the windows and on the left perhabs.. but better on the top? is that possible or not? Thank you for your bigh help!!!
Sure. Can you just explain a little more. Are you asking about the scroll bars within the iFrame? Where would you like those to go? Thanks.
yes exactly the scroll bars. I would like to have one on the top also.. for some people with smaller scren this can be a issue :/ and they cannot reach the bottom one straigh away.. just checking if thats possible, i think it will be helpful. What you think Andrew?
It can be done with some work. In your original iframe tag, turn all scrolling off:
That goes inside the iframe tag as a new attribute:
http://www.w3schools.com/tags/att_iframe_scrolling.asp
Then we’ll need to introduce our own scrollbars:
http://baijs.com/tinyscrollbar/
Won’t you email me on [email protected] with two things:
Your current iframe embed code and also a copy of your static HTML file. Mail me now if you can.
hi andrew thank you for the help, Thats all i need :)
Thanks for your understanding. All the best.