I'm building a site for a client but I've encountered a strange bug with jQuery's .hide() function
If you check out this sample url and click any one of the thumbnails you'll see the image is aligned to the left. Now if you open or switch to any other browser tab and then go back to the sample url the image is centered...
The image should be centered, and worked just fine until I added this;
$(".single-content-overlay").hide();
to my scripts file...
Anyone have any ideas why this might be happening and how I might be able to fix it?
You have a problem with CSS (probably generated by your slideshow javascript lib). When the browser gets the focus again, the <li>s width are recaldulated. This:
<li class="slide flex-active-slide" style="width: 0px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 0px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
Becomes this:
<li class="slide flex-active-slide" style="width: 1088px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
<li class="slide" style="width: 1088px; float: left; display: block;">
<img alt="#" src="http://www.robotwp.com/clintenglish/wp-content/themes/clintenglish/images/samples/marley.jpg">
</li>
The same behavior happens in Chrome, Firefox and IExplorer (all the latest versions). I'm almost certain that this is a issue (or a feature?) with your slideshow lib. Try to define the <li>s width manually to see if the problem continues.
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I'm using CarouFredSel for an image carousel, and I'm having an issue with the transitions between items.
I want to use some simple HTML in the carousel rather than plain old images, but when I do, the swipe transition doesn't work. While the old image slides out, the new image flashes in rather than sliding in and you can see the background briefly in between images.
<div id="carousel">
<div>
<img src="img/instagram1.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 1</div>
</div>
<div>
<img src="img/instagram2.png">
<div style="position:relative; z-index:100; bottom:20px;">Byline 2</div>
</div>
</div><!-- /carousel -->
As you can see from this JSFiddle, the transition effect works fine with just images, but it looks off when using HTML.
It turns out that all you have to do to fix this is apply a left float on the items like this:
#carousel div {
display: block;
float: left;
}
I am working on a mockup and have created this:
http://cynthialarenas.billybluedigital.net/
I'm having a problem with my nav buttons: Play, About, How To.
If you click 'about' then 'how to' everything works fine, but if you go from 'how to' to 'about' the 'how to' disappears. How do I get all the buttons to work consistently and not disappear. Also I am noticing the slide transitions are actign a little funny, sometimes displaying a white banner.
I want the jquery to be just inside the content area but its appears to flash quickly above and over the footer.
Can anyone shed some light?
Here are some snippets of my code:
CSS:
#contentArea{
width:1024px;
height:522px;
background:#FFF;
float:left;
overflow: hidden;
}
#playSlide, #howSlide, #aboutSlide {
display: none
}
.toggleDiv p {
margin: 0 0 12px 0
}
HTML:
<div class="toggleDiv" id="aboutSlide">
<div class="navContainer">
<div class="menuItem">
<a class="show_hide" rel="#playSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#aboutSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#howSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
</a>
</div>
</div>
Gonna have to agree with Mitchell on this one. Using images for simple navigation like this is incredibly non-SEO friendly. Not only that, it's just plain unprofessional.
While I can't cause the problem to happen when I visit your site, I can offer an alternative to the images you're using.
http://jsfiddle.net/L2MVu/1
<ul class="nav">
<li class="active">play</li>
<li>about</li>
<li>how to play</li>
</ul>
As you can see, it's all editable, but still just as clean as you wanted from the images.
While this doesn't do a whole lot to save page-load time, it's always best to try to get a desired effect with pure CSS before resorting to images.
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
I'm working on a portfolio site for my wife's lighting design business. The jQuery cycle plugin seems to provide the functionality I want, but even after reviewing the examples on Mike Alsup's site, I'm stumped. Really, I just don't have the background with JavaScript to pull this off myself.
I want to build a slideshow, controlled with a pager function, using thumbnails for navigation. The main slides and the thumbnails are totally different aspect ratios (to maintain the layout), so I can't use cycle to generate the thumbnails for me. The slides include an image and a caption. I'd like to preserve as much of the existing markup as possible.
Here is the slideshow content:
<div id="slideshow" />
<div class="first">
<img src="../_/img/projects/shootingstar-1.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-2.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-3.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-4.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-5.jpg" alt="" />
<p class="credit">caption here</p>
</div>
Here is the thumbnail/navigation content. I tried to use a consistent naming convention for the images:
<div id="slidenav">
<li><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></li>
<li><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></li>
</div>
And finally, my styling, in case that is helpful in some way:
#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px solid #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
#projectcopy ul li {font-size: 11px; color: #666; line-height: 14px; text-align: right; margin-bottom: 10px;}
I have an example posted here:
http://pritchardlighting.com/nova/portfolio/sample-project.html
You can see that I currently just have a simple cycle set up on the slides. Please ignore the mess. Obviously, this is still in dev.
I would really appreciate any help. This has to be something that others have tried to do. I'm just having a hard time making my way through the examples I've seen so far. They all assume (rightly so) a baseline understanding of JS that I just don't possess.
please refer to this demo to have your question answered:
remove all divs you have wrapped around your content to cycle (the child elements of div#slideshow. they prevent cycle from working as the script cycles everything within ONE div).
remove p.credit for the same reason. otherwise the script cycles it and you run into trouble if you have no matching thumbnail (see 3.)
make sure, the number of thumbnails {*t.jpg} matches precisely the number of img in {div#slideshow}. thats the point that makes it work. mismatch leads to a non working script.
use exactly the jquery markup from the demo and replace {pager: '#nav',} with {pager: '#slidenav',}
if still not working check with firebug if the script loads. if yes, try first to make the cycle {div#slideshow} running before you move forward to the linked thumbnails.