JQuery automatic slideshow - javascript

I'm trying to just implement a simple automatic slideshow with JQuery on my webpage.
I followed this tutorial : https://www.youtube.com/watch?v=r5iPoJZjXnU. But, it seems that my fadeOut() and fadeIn() functions aren't working well. The code works but the transitions between images are too fast and not smooth.
Here's what i did:
added these lines in my head tags for upload jquery and jquery UI librairies:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
then, at the end of my body tags i simply added:
<script type="text/javascript">
function galerie(){
var active = $("#slideshow .active");
var next = (active.next().length > 0) ? active.next() : $("#slideshow img:first");
active.fadeOut(function(){
active.removeClass("active");
});
next.fadeIn("slow").addClass("active");
}
</script>
and call this function whenever i click on my h1 tag:
<h1 onClick="galerie()">Pure</h1>
Do you have any suggestions ?

Problem soleved, it was my html structure which wasn't right

Related

Conflict between jQuery 1.4.2 and 1.9.1

I have a background slideshow that uses the jQuery 1.9.1 which is called here "jacksis.js" in body section and i have another submenu slider that uses jQuery 1.4.2 as in here is called "core.js" in head section. However, when i added the jQuery 1.9.1, the slider on 1.4.2 stopped working. I tried the noConflict() mode without success and the jQuery call innstead of the "$". Down below, the "ss1_wrapper" is using the 1.4.2 and the "cbp_bislideshow" the 1.9.1. What could be wrong in my
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<link href="index_files/main.css" type="text/css" rel="stylesheet">
<script src="index_files/core.js"></script>
<script src="index_files/js/modernizr.custom.js"></script>
</head>
<body id="page">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
...
</ul>
<form class="" name="aspnetForm" method="post" action="index.htm" id="aspnetForm">
<div class="ss1_wrapper">
......
</div>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
</form>
<script src="index_files/jacksis.js"></script>
<script src="index_files/js/jquery.imagesloaded.min.js"></script>
<script src="index_files/js/cbpBGSlideshow.min.js"></script>
<script>$(function() {
cbpBGSlideshow.init();});
</script>
<script type="text/javascript" src="index_files/quant.js"></script>
</body>
I am receiving only one error in firebug in line core.js (1.4.2) line 1993:
TypeError: jQuery.browser is undefined
and the error is in that function at line 4 (it's line 1993 in the original file)
(function($) {
$(document).ready( function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
What couldn't be wrong in my code if i tried all the possibilities of getting away with jQuery conflict?
UPDATE:
I introduced jQuery 1.7.1 and deleted both 1.4.2 and 1.9.1, then now i have both my Slider and Background slideshow working again together BUT my drop-down menu (which could be seen on my webpage www.es-processing.com) is not working anymore. On the online version it is working, but right now, on the version i'm working on it's not functioning at all. You can have an idea from my dropdown on my webpage to see which jQuery functions it follows and how to adapt them on the new 1.7.1 i put.

web page wont display when javascript is active

I am currently building a web page and it will not display when i put in the javascript in the head section
this is my code for the head section:
<head>
<meta charset="utf-8">
<title>***************</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#generalAdmissionList").change(function () {
var selected = $("#generalAdmissionList option:selected").val();
$('div').hide();
$('#' + selected).show();
});
$(document).ready(function (e) {
$('div').hide();
});
});
</script>
</head>
while using fire bug in firefox the webpage is not giving me any errors and when I take out the javascript the page works.
I have also tested the javascript in jsFiddle and it is working ok
Link to jsFiddle: http://jsfiddle.net/Dobby90/8xeNw/
Thanks in advance to anyone who can help me.
This hide all you main div element. Remove this string.
$('div').hide();

Responsive drop down menu not rendering

I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:
http://jsfiddle.net/Lwdc4/
My JavaScript code is in an external file. This is what the file looks like:
$("#nav").addClass("js").before('<div id="menu">☰ </div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768){
$("#nav").removeAttr("style");
}
});
And my import to HTML:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="nav-menu.css"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nav-menu.js"></script>
</head>
What is wrong with my code? Any help is appreciated. Thanks in advance.
You need to add the jquery library to use the $ object
Add this line in your HTML to use it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Or choose your version directly on the jQuery website http://jquery.com/download/
Updated fiddle :
http://jsfiddle.net/Lwdc4/1/

Prevent page from scrolling to top

I have a little problem with jQuery Mobile and anchor link's by url.
When page is load, after jquery throw event's work fine, but then jquery execute code and move page to top of page.
*my problem is not linking anchor in same page, is link another page with anchor with url, for example: example_jquery.html#wopwop
I write a little example for see isn't work (you can test in any browser):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
</head>
<body>
<div data-role="page">
<h1>wopwop</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a id="wopwop"></a>
<h1>wopwop</h1>
</div>
</body>
I write a patch looking post's in stackoverflow:
<script type="text/javascript">
setTimeout(function(){
if(location.hash == "#wopwop"){
$.mobile.silentScroll($('#wopwop').get(0).offsetTop);
}
}, 700);
</script>
But i don't think is solution, do you know how to make this work?.
Thx.
Sorry for my poor english
The default behavior of jQuery Mobile when showing pages is to scroll to top upon showing a page. The value of scroll is always 0 and stored in $.mobile.defaultHomeScroll.
You need to override this value on any page event but before page is totally shown and transition is done.
if (location.hash == "#wopwop") {
$.mobile.defaultHomeScroll = $('#wopwop').offset().top;
}
This will force scrolling to wopwop div's offset in page without scrolling to top and then back to that div.
$(document).ready(function(){
$('html, body').animate({ scrollTop: $("#wopwop").offset().top }, 7000);
});

jQuery (and all #links) Breaks When I Make Container/Parent Div .fadeIn on pageload - Why?

Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css

Categories