I'm having an issue with an Orbit slideshow, part of ZURB's Foundation.
http://visiondemo.com.au/tmp/
If you click on the header logo or land on the homepage by clicking a link, the slideshow loads perfectly. No issues. However, if you hit refresh, it's missing.
Also, when the page is refreshed and the slideshow is missing, resizing the window makes it magically appear.
Any ideas how I can get it loading at all times?
Cheers.
Hmm this answer will be quite a hacky way of doing things but I think it'll work for you in a way or another..
Firstly to fix the height: 0px problem in the data-orbit.
Since you have chosen the content of your orbit to be an actual caption as well then, try to add this in a <style> tag or in your style.css. (#note this is only for the medium-up block only, supply your height for the small block).
.slideshow.show-for-medium-up > li {
height: 421px !important;
}
now thats already good and working, you'll see your orbit now.. apparently another problem would appear. It would display the orbit before the content's .orbit-caption finishes styling the list. So append this small fix to your style.css
/* Orbit Fix */
ul[data-orbit] {
margin: 0;
padding-left: 0;
list-style-type: none;
}
/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
display: none;
}
/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }
/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
display: block;
}
UPDATE:
I think thats because you show the image only when the screen is small, I recommend adding this,
.slideshow.show-for-small-only img {
/* change the img height here */
height: 200px; /* Change this as you see fit */
}
Related
I am attempting to make a webpage mobile responsive however the images in the flexslider on smaller screens, goes askew. Whether it was loaded or scaled down, the image to the right encroaches on the current image.
I would post an image but I need more reputation points.
I am trying to figure out how to push the current image being viewed over so that the edge of the next picture isn't being shown prematurely.
Just needed to add a media query to apply margin-left at a certain point. just couldn't find the rule to target for a little while:
.slides:first-child img{
height: auto;
}
//fixes the bug where the second image appears on the right on smaller screens
#media (max-width: 991px){
.slides:first-child img{
margin-left: 40px;
}
}
.flex-control-thumbs{
margin-top: 20px;
li{
cursor: pointer;
list-style-type: none;
}
}
I am working on this site:
http://www.thecarlossanchez.com/Test/thecarlossanchez/Galleries/stilltest.html
When I created the thumbnails everything worked great, but for some reason it added all this extra space if you scrolled to the right. Everything worked the way it should with in the window and it never made me scroll right ever, so I ignored the extra space.
Now I am adding Isotope in order to filter the content, but when a category is selected all the thumbnails drop down and to the right. Something is centering the content to all that extra space. And I am not familiar enough with jquery to figure what where the problem is.
Here is an example of how it should work without isotope:
http://www.thecarlossanchez.com/Galleries/people.html
Any ideas on how to fix this?
Upon checking on your site, I noticed you got an enormous padding size being set on your gallery element.
Currently it's :
.gallery{
width:80%;
padding:800px; /* enormous padding */
position:relative;
}
I've changed that to padding: 0; and the extra space at the right side is removed.
.gallery should look like this now:
.gallery{
width:80%;
padding:0;
position:relative;
}
Also if you want to center your gallery when the page is resized, add margin: 0 auto to .gallery element.
e.g.
.gallery{
width:80%;
padding:0;
position:relative;
margin: 0 auto; /* center gallery */
}
How can I set up my menu to slide out, only when the header is hovered on? I'm looking to set it up to function exactly like this: http://adirondack-demo.squarespace.com/
So on hover, it slides out, but doesn't push the content down.
Any ideas? jQuery, or can this be done VIA CSS?
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I can't seem to get it working).
Here is my: JsFiddle
bar is the top bar, baz is the page content and foo is the drop-down. On mouseover of bar, foo drops down without effecting the content, because it is positioned absolutely. The animation keeps it at the bottom of bar. Feel free to play with it and ask questions.
One option: if the menu is a child element of the header. In that (markup) case you could set position: relative; to the header and position: absolute; to the menu element to position the one below the other. Use the CSS :hover pseudo class to make the menu visible.
#header {
position: relative;
}
#main-menu {
position: absolute;
top: 100%
display: none;
}
#header:hover #main-menu,
#header #main-menu:hover {
display: block;
}
If you want the menu to stay open, if the user crosses the border with his/her cursor, you may use an additional wrapper around the menu. That wrapper would become the target of the display settings. You could then assign that transparent wrapper a padding of your choice. The menu stays visible as long as the cursor is within the padding of the wrapper element.
#main-menu-wrapper {
display: none;
padding: 5em;
}
#header:hover #main-menu-wrapper {
#header #main-menu-wrapper:hover {
display: block;
}
Please can any one help me.
When I resize the browser then the collapse dropdown's backpart are shown what I dont want(problem 1.png).
I want that when I will resize the browser the dropdown and it backpart will be hidden accroding to the header of dropdown.
when on hover, list item are not showing , i want to show images also on hover state.( problem 2png )
problem live link:
![enter image description here][1]http://tb.taslimk.tk/
Another problem:)
It looks like "style4.css" uses several media queries to change the size of the element (.cd-dropdown) that says "FILTER BY INTEREST". Here's an example of one in there:
#media (min-width: 768px) and (max-width: 979px) {
.cd-dropdown > span {
font-size: 12px;
line-height: 4.2em;
}
.cd-dropdown ul li span {
font-size: 12px;
}
.cd-dropdown, .cd-select {
width: 220px;
}
}
Whereas the width of .cd-dropdown at full screen width I believe is 300px.
I think the issue is that the list element (ul, li), which is a child of .cd-dropdown, is not changing width as well whenever the media queries take charge.
I think the ul underneath .cd-dropdown only ever has a width of 100% set:
.cd-dropdown ul {
position: absolute;
top: 0;
width: 100%;
}
Maybe if you change the width of the ul to be the same px width as .cd-dropdown in every media query block, then this could solve your issue (the bug seems to revolve around the fact that the width of the ul is set to 100%).
It's a bit hacky, but one way of handling this without having to modify the core dropdown library would be to add the following css rules to override the inline styles that get set by the library.
.cd-dropdown ul li {
width: 100% !important;
left: 0 !important;
}
I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.