How to make javascript slider automatically slide - javascript

My javascript skills are pretty basic but I'm trying to learn more, so was wondering if someone could help me out or point me in the right direction as I'm a bit puzzled with a site I'm working on.
The site is: http://epaints.co.uk/ basically I am trying to get the home page slider to slide automatically on page load, at the moment it only slides when the user clicks the navigation buttons.
$('.caro-arrow.caro-arrow-r').click( function () {
setTimeout("$('.caro-arrow.caro-arrow-r').click()", 4000);
});
I always thought it was a simple as adding the below code for it to auto slide, but it doesn't seem to work:
auto: true,
autoControls: true
Like I said, if anyone can help me out or point me in the right direction, it would be greatly appreciated!
Thanks for your help :-)

Use the following code in your $(document).ready(function () { /* HERE */ })
$('.caro-arrow.caro-arrow-r').click( function () {
setTimeout("$('.caro-arrow.caro-arrow-r').click()", 4000);
}).trigger('click');
We don't need to write the same function twice, just trigger click so that it runs on page load.

Related

smooth scrolling - same implementation but different effects?

I have the following odd problem:
My first page has the exactly same header and section as the second page - my second page has smooth scrolling, my first page had it but lost it somehow.
I weren't able to track down how the template creator made those smoothing effects - does anybody know how something like this gets implemented? And has somebody maybe a clou why the first page hasn't this effect while they have the same implementations?
Thanks in advance,
Trusto
Edit:
I tracked down the implementation:
(function ($) {
var o = $('html');
if (o.hasClass('desktop')) {
include('js/jquery.mousewheel.min.js');
include('js/jquery.simplr.smoothscroll.min.js');
$(document).ready(function () {
$.srSmoothscroll({
step: 150,
speed: 800
});
});
}
})(jQuery);
The page were it doesn't work is a php-file, the others are html.
I found the issue - I implemented the unedited jquery-file in the first page which override the scrolling function.
Thanks for your help.

Slide up div on click

I want to create an effect similar to the bbc website where the user will click on the title and then a snippet of content will pop up: http://www.bbc.co.uk/
i have looked all over the place and found this snippet
$('.grabPromo').click(function(e){
$('.slideUp').slideToggle();
});
JSFIDDLE
I cannot get it to the opposite though? i want the text to slideup rather then down. Any help would be appreciated. if someone can point me in the right direction either using css or Jquery i would be grateful.
I am using it for the captions on the Slick Carousel in case that helps at all.
What i want before Click:
What i want it to do on Click:
You can use the callback:
$('.grabPromo').click(function(e){
$('.slideUp').slideDown(300 , function() {
$(this).slideUp(300);
});
});
See the fiddle:
http://jsfiddle.net/Sd8rh/858/
In this fiddle you have an example with delay.
Good luck
You can use jquery UI library
$('.grabPromo').click(function(e){
$('.slideUp').toggle("slide", { direction: 'up' });
});
For more information
https://jqueryui.com/effect/

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!
Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.
According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

Hover fast slideshow error

I have a slideshow and I have links to the images on the slideshow.
When the mouse enters the links, the slideshow pauses and plays when the mouse leaves.
My problem is that the slideshow appears to get faster and faster when you quickly move the mouse across the links.
function begin_slideshow() {
some code
}
and the mouse enter/leave function
element.on('mouseenter', function () {
var url = $(this).data('loc').replace('_t', '');//grabs the image
fig.attr("src", url);//changes the source
$('.shown').removeClass('shown');//the link that can be seen has a class of shown
$(this).addClass('shown');//adds class of shown to the now showing link
clearTimeout(timer);
}).on('mouseleave', function () {
timer = setTimeout(begin_slideshow, 5000);
});
I think the problem lies in the hover somewhere, hopefully you can help :) as I am truly stuck.
EDIT
http://jsfiddle.net/uYMkr/8/
I would assume your problem would lie in the timeout. However it seems correct. Therefor I would think the problem exists in either your usage of the slideshowcode, or in the slideshowcode itself. Can you post that?

Categories

Resources