If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.
Related
I have a problem showing my page visually the same on FireFox and Chrome.
Page renders correctly with Chrome (showing icons in two lines), but in Firefox icons break visually and create a third row. I think that the problem is with Bootstrap, but I don't understand why. I have tried different solutions, but nothing.
The page with this problem:
Link of the page: http://www.unishare.it/sedi/1
You have a lot of things going on in your HTML. Firstly, you shouldn't write any code outside of the scope. You should place your custom style elements always inside of the tag. Secondly, move bootstrap.css to the top. That is your css boilerplate (That is the css code that resets your visual settings across all browsers). All the other css files (font-awesome.css, slider.css, etc...) should be placed after the boilerplate css code/file.
After placing all library css files, your custom css files should be the last ones in the tag (I mean all the style codes at the top of your html page).
Try these suggestions and come back with the result. I believe you'll be good to go then.
EDIT: After taking a second look and playing your HTML with FireFox's dev tools, I created a solution for you. Just surround your "portfolio-boxes" divs with a row. They are not actually recognized as a seperate row in your DOM, that's why they don't appear in two seperate lines.
In short, you should create a div with a class of "row" for every "portfolio-boxes" div, seperately.
Does that solve your problem? If yes, you can vote up and select the answer ;)
I have basic coding experience. In my Wordpress install, some of my pages have a blank whitespace under the footer because there is not enough content to push it to the bottom of the monitor at higher resolutions. The problem is persistent on chrome, Firefox, IE etc. I would like to fix this so that:
If the content is shorter than the browser resolution, the "body" will fill the page until the footer is at bottom of the screen with no blank whitespaces after or before it.
No matter what the browser resolution is there will be no whitespaces after the footer, so im trying to refrain from code that will use a determined "px" number.
I want the footer to be displayed in a traditional 'bottom' of the page way and NOT a sticky footer that always remains at the bottom of the screen no matter how far you scroll.
As I am working in Wordpress I have access to custom CSS and source theme files, however, I would prefer to solve this problem with custom CSS and an answer that acknowledges a Wordpress specific fix. I have tried several solutions but to no avail. I have been suggested to use Ryan Fiat's "Sticky Footer" solution but I'm unsure of how I would incorporate that into my Wordpress as it uses PHP and I mainly edit with custom CSS.
Heres a Fiddle of my footer PHP.
Q. Please provide me with a clear and direct solution for Wordpress that will make sure there are no whitespaces below the footers on my site when the content is shorter than the browser.
You can find an example of the whitespaces on my website here
Solutions i've tried:
#footer {overflow: hidden;} in the custom CSS didn't work.
Putting html, body, parentDiv, childDiv, section, footer { height : 100%; } in my custom css but that didn't work.
#copyright { padding-bottom: 20px;} "#copyright" is under the footer so this did reduce the whitespace to a point where it seemed it weren't present, but on taller browser windows the white space reappeared.
"div-wrapper, body" solutions like Ryan Fiat's seem to have positive responses but again I cant find a Wordpress specific one.
Answer from those that have experience with Wordpress are greatly appreciated.
I don't think there's a good pure CSS fix that isn't hacky in some way without changing how your page works (sticky footer or something).
Here are two options:
Use javascript to determine the height of the window, subtract the height of the footer, and force the content section to have a minimum of that height. You would also need to run this same function when the window is resized. This isn't a great solution.
What I would recommend is to just add the CSS rule body {background: #222} to make the body the same background as the footer. This way, if they content doesn't fill the whole window it just looks like the footer fills the empty space instead of white.
I'm building a site where there will be four tiles on the front page. When a tile is selected, I want the content to pop up in like a window that will be a bit transparent so you can see the main page behind it.
I've successfully coded just that, getting the link to bring up another div that is otherwise hidden and I've even gotten it to load another html document. I accomplished this with XMLHttpRequest();. My question is, is there a more efficient way to do this? I know I've done something similar in PHP before in school and when I google, I do see that being a way to do it, but I'm also seeing jQuery and AJAX being mentioned. My overall goal is to get it to where if I want to update the CSS of the screens, that I only have to do that for the main page, and it affects the content pop-ups.
I hope I explained this well enough. Thank you for any advice!
It's very simple to do in jQuery:
$("#yourDivsId").load("/UrlOfYourIntendedMarkupDelivery?anyarguments=true");
I'm stuck with a div that is in one position while the page loads, and in another position as the page finishes loading. I've spent nearly all afternoon on this one little thing, and cannot seem to grasp why this is happening.
I am using wordpress, so there are plenty of different conditional tags for different templates but I can't see the problem in the template files. The div that seems to be giving me the hard time is the container. I changed the background color of the container on the template that I'm stuck on, so I can see what its doing while the page loads, and it looks to me like once the page is loads 45px of either margin-top or padding-top are being applied to the container.
Does anyone have any ideas? I've gone through conditional tags, and my style sheets and I just don't get why its behaving the way it is. Any help would be greatly appreciated.
It's taken me a couple of page refreshes but I think I can see your problem:
There is this particular DIV: class="entry-image-container" that is loaded into the page despite not being required and is causing your drop down as this element seems to be loading via Opacity in the DOM ....
If you hit F12 and open up the entry-image-container tag, hit refresh on the page you will notice that the entry-image-container is loaded through Opacity and seems to be causing a delay in loading (i'd have posted an image but StackOverflow says im not of higher enough rep yet)
Perhaps including a conditional statement for this tag would resolve the issue for you?
I hope this has helped in some way - Using Chrome on Mac OSX
The header has a 44px padding (22px 0 44px).
For me (current stable FF, Win7) nothing is moving.
I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm