Flex Slider Seems to Load Before CSS - javascript

I'm using FlexSlider in what seems like a pretty simple manner. However, after it reaches the final slide and loops back to the first slide, the content seems to "snap" into place, as though the slider loaded prior to the CSS.
Here's a stripped down example:
http://aj2.w-interactive.com/mds-slider-test2.html
You'll notice that after the slider loops back around from the third slide (you need to watch it go all the way through), the text in the first slide (where it says "We Deliver Your Trust" etc...) initially loads without the styles, then sort of "jumps" down into place, as though the styles finally loaded for it. But the first time it loads up, before looping through, it's totally fine.
Here's the script from the bottom of the page:
<!-- FlexSlider -->
<script defer src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: "4500",
pausePlay: "true",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Any ideas would be appreciated. Thanks!

Your CSS is not being applied correctly because you have multiple elements with the same ID.
Reference: http://www.w3schools.com/tags/att_global_id.asp
"The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document)."
You have this in your sample HTML
<li>
<div id="slides" class="bkgd1">
<h1 class="fade">We Deliver Your Trust</h1>
<h1 class="fade">Intermodal Drayage</h1>
<h2 class="fade">Centrally Located Terminals</h2>
<h2 class="fade">9 Locations Covering North America</h2>
</div>
</li>
<li>
<div id="slides" class="bkgd2">
<h1 class="fade">Rail & Steamship Interchange</h1>
<h2 class="fade">Fully Customs Bonded</h2>
</div>
</li>
<li>
<div id="slides" class="bkgd3">
<h1 class="fade">Dedicated Fleet & Preferred Network</h1>
<h2 class="fade">Real Time Dispatch Technology</h2>
<h2 class="fade">Instant Proof of Delivery</h2>
</div>
</li>
And this in your CSS
#slides h1
Change these ID's to classes (like this)
<div class="slides bkgd1">
<div class="slides bkgd2">
<div class="slides bkgd3">
And change your CSS selectors accordingly
.slides h1
And then it should work.
More Detail
FlexSlider creates clones of your <div> elements to allow for smooth cycling and repeating. When it creates the clones, it copies the ID from the original and appends "_clone" to the end of it. This is actually what you see when you go back to the first slide after cycling through. Therefore, your CSS styles (#slides h1 etc) are not being applied.
Further, it is not enough to simply add #slides h1, #slides_clone h1 because of the first thing I mentioned in this answer. IDs must be unique.

Related

JS - Toggle all DIVs

My issue involves multiple DIVs that display:block or display:none each with their own anchor tag. The main problem is that I have recommissioned the JS code that runs this feature without completely understanding it. All I need is a way to toggle all of the DIVs with a single "Show All/Hide All" link. I cannot wrap my head around it.
I have tried absolutely everything that my exceptionally limited grasp will allow - which consists mostly of swinging my arms in the dark and hoping I accidently build a miracle. Since that hasn't worked I am shamefully seeking help.
The only thing that makes this question unique are all the variables with this specific issue -
An (almost) working example can be found at: www.robertmeans.com/menu.htm
The JS code:
imageX01='plus';
imageX02='plusEven';
function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}
function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}
The HTML
<div id="task_item01">
<img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" />
Div #1
</div>
<div style="display:none;" id="div01">
Content 1
</div>
<!-- ******************************** Item 1 End **************************** -->
<!-- ******************************** Item 2 Start ************************** -->
<div id="task_item02">
<img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" />
Div #2
</div>
<div style="display:none;" id="div02">
Content 2
</div>
I have spent countless hours trying to work this out on my own. Any help is deeply appreciated.
Ok first of all, it seems like way too much code to me... you can do this very easily by using jQuery. I have made an example here: http://jsfiddle.net/Nr2f6/4/
Here is some simple html to help you better understand what is being done:
<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
I have superb items in this div... the world is about to understand just how awesome I am!
</div>
<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
I have amazing contents in this div. I want to show them to the world!
</div>
as you can see above, there is no inline css. All the styling (display: none) should be placed separately, to not conflict with what you are trying to do. So simply place it in a separate css file.Then run this code:
$("div[id^=item]").click(function(){
var reference2open = $(this).attr("id");
//get the data-rel attribute associated
$("div[data-rel='"+reference2open+"']").slideToggle();
$("span",this).toggleClass('minus');
});
$("#all").click(function(){
if($(this).hasClass('close')){
$("div[data-rel^=item]").slideUp();
$("div[id^=item] span").removeClass('minus');
$("#all").removeClass('close');
$("#all").html('open them all');
}else{
//open and close them all by clicking
$("div[data-rel^=item]").each(function(){
if($(this).is(':hidden')){
$(this).slideDown();
$("div[id^=item] span").addClass('minus');
$("#all").html('close them all');
}
});
//change the button to close
$("#all").addClass('close');
}
//$("div[id^=item] span").toggleClass('minus');
});
****ADDED IN THE TOGGLE PLUS AND MINUS SIGNS USING CSS****
.plus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
.minus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
Do not forget to include your jQuery file! Hope this helps :)
Just wanted to add in some details for better understanding:
div[id^=item]: Is saying whenever a div is clicked that has an id that starts with (^=) item, run the code.
$("div[data-rel='"+reference2open+"']").slideToggle(): is saying take the id from the div that was clicked and find the content box where with the same name but in the data-rel attribute. The slide it down, if it is already down, slide it back up (toggle). You do not have to use a slide effect, I just thought it was more fun!
Then last but not least, the function you were looking for: How to open them all at once. Again we are using the (^=) to find all of the divs.
$("div[data-rel^=item").slideToggle();: So here we are saying to jQuery, hey toggle all the boxes that have a data-rel attribute that starts with (^=) item.
This last part is pretty neat, because you can create many instances of the item-? boxes and this code will work for any number of them. You can also add the same code to a different div, like even and odd, and toggle all the even and all the odd elements accordingly.
You could assign a specific class to all the things you want to toggle, then loop through all of them with a toggle function.

Selecting a div which is nested below another div

I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case

Multiple sets of "nextPage"s

First and for most, I am new to web coding and more or less just teaching myself when I have free time... so I apologize if I make little sense.
I essentially have a simple javascript that allows me to have a prev and next button to move through multiple images. However I wanted to have multiple of these sets of "galleries" but in my case they interact with each other. I've attempted to contain each section (gallery, small text box, and the two buttons) but I've had no luck.
If you follow my link bellow you can see my issue... depending on the size of your screen you may only see one gallery, but you can see the each set of buttons affects each gallery.. This also for some reason adds "blank" images into the list of the image galleries.
http://robinwkurtz.com/slider/issue.html
Thanks in advanced!
This is my source code
<div class="section black" id="top_ten">
<div id="title"><h1>TOP TEN</h1></div>
<div id="image">
<div class="container">
<ol>
<li><img src="images/project5_1.jpg"></li>
<li><img src="images/project5_2.jpg"></li>
<li><img src="images/project5_3.jpg"></li>
</ol>
<div id="contentfooter">
<div id="footer">A publication and poster, which teaches guide lines to technical constraints. With any design job there comes rules and guidelines to follow in order to put out a proper project.</div>
<span class="button prevButton">–</span>
<span class="button nextButton">+</span>
</div>
</div>
</div>
</div>
This is my js
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(window).load(function(){
var pages = $('.container ol li'), current=0;
var currentPage,nextPage;
$('.button').click(function(){
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
currentPage.hide();
nextPage.show();
});
});
You have multiple elements with the same ID #container. Only one element can have an ID. Make it a class if you want to give it to multiple elements.
Now, when you select pages, you're selecting all of them.
var pages = $('#container ol li')
That would select every li inside and ol inside #container (it would be every container but it's an ID so that's causing you problems, too).
You know which button you clicked using $(this) so you can use .parent() to go up the DOM and find the container that contains that button and set of pages and only select that.

setting content of element with jquery via text() duplicates the text

I have a one page site that displays a portfolio. Basically it consists of a a list of images that are displayed as a slideshow with sudoslider
Once a new slideshow (an image in this case) is loaded, the description of the image should be updated.
For some reason or another, the description is displayed twice, as you can see at this version which is created via wordpress. The weird thing is that I have a static version of this website that does not seem to produce this problem, while the html/javascript/css structure is exactly the same (as far as I am not overlooking something).
Relevant pieces of code:
html-list:
<section id="portfolio">
<ul id="portfolio-ontwerpen" class="noscript">
<li>
<figure><img width="800" height="569" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/klinch1.jpg" class="attachment-large wp-post-image" alt="klinch1" /></figure>
<figcaption>Klinch poster</figcaption>
</li>
<li>
<figure><img width="800" height="565" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/hh_grid.jpg" class="attachment-large wp-post-image" alt="hh_grid" /></figure>
<figcaption>Grid</figcaption>
</li>
</ul>
</section>
javascript:
var sudoSlider = $("#portfolio").sudoSlider({
afterAniFunc: $("aside figcaption").text($(this).find('figcaption').text()); },
});
$(this) in this case refers to the current slideshow (the current list-item)
sudoslider description of the afterAniFunc (basically a function that is executed after the next slide animation has been finished)
afterAniFunc:false. Same as beforeAniFunc. It's just runs after the animation (still any animation) has finished. beforeAniFunc does not execute multiple times if you use fade, but can still execute multiple times if you use continuous.
I'm not sure exactly how/why it's happening, but you seem to be selecting multiple elements with the statement:
$(this).find('figcaption').text()
Selecting only the first element is providing the correct result for me:
$(this).find('figcaption').first().text()

How to prime HTML for use with JS accordion effect?

I've got a website set up with well structured pages, eg. <h1> for the website name, <h2> for the page name and <h3> for the different sections on the page.
Anyway, I was looking to set a bunch of the really long pages (an FAQ page for example) up with an "accordion" effect, with the <h3> elements being the toggle and the content directly following being toggled. But the collapsible content needs to be in it's own <div class="draw"> (or similar) and this isn't how the content is set up currently. I was hoping this was possible without touching the existing HTML and just somehow changing the DOM with JS (with jQuery assistance?) to accommodate.
I thought maybe wrapping content between the <h3> elements in a classed <div> might work but wouldn't know how to get this done. Help?
Here's one way to do it that doesn't rely on traversable DOM elements between the h3 tags. I'm not sure how efficient it is to swap out the entire contents of the body tag like this on every load though...
$(document).ready(function(){
var content = $('body').html();
content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
$('body').html(content);
});
I tested this out on content formatted like so:
<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
The jQuery documentation on the accordion widget is very easy to use. http://docs.jquery.com/UI/Accordion. But using the jQuery method only works if you have the structure they describe in the docs. In other words (as far as I know) it is impossible to use the jQuery accordion widget without touching your HTML. This is the structure:
<div id="accordion">
<h3>Tab 1</h3>
<div>
First tab content
</div>
<h3>Tab 2</h3>
<div>
Tab two content
</div>
<h3>Tab 3</h3>
<div>
Tab three content
</div>
</div>
Then you would create the widget using the line of javascript:
$("#accordion").accordion();
If you wanted to use jQuery to format your HTML for you, you still need a way to select and parse your HTML. Each tab's content needs to be selectable some how. If your HTML already has the tabs separated somehow, then you need to take a look at this page http://docs.jquery.com/Manipulation. It should be pretty straightforward.
If you're willing to consider non-JS alternatives, Stu Nicholls has some interesting html/css (no js) options on his CSS Play website:
http://www.cssplay.co.uk/menu/gallery3l
http://www.cssplay.co.uk/menus/tabmenu.html
(Among others)
I suppose it looks like this:
<html>
<h1>site name</h1>
<h2>page name</h2>
<h3>section</h3>
<p>some stuff</p>
<p>different paragraph</p>
<ul><li>a list</li></ul>
<h3>next section</h3>
<p>different stuff</p>
...
</html>
you could iterate over all direct children of html. At first h3 you start collection all subsequent items until the next h3. if a next h3 comes or page end you create a div, and add it after the starting h3 all collected elements should be removed from their parent (the html) and added as children of the div.
looking at http://docs.jquery.com/Traversing this should be easy. I'm not an expert on jquery, but it should be doable.
Dave Ward of Encosia has great 10 minute tutorial on jQuery, Firebug and selectors that builds exactly what you looking for.

Categories

Resources