We're using a recently CSS-modified Featured Content Rotator with jQuery (http://demo.webdeveloperplus.com/featured-content-slider/) on our Drupal 6 site.
If a user scrolls down to read things towards the bottom of the page, once the slider automatically shifts to the next content fragment the page instantly jumps back up to halfway up the slider container every time it switches.
The only time this doesn't happen is when the viewer is a logged-in admin (assuming because of the extra back-end scripts running).
Any idea what could cause this or how to stop it?
Thanks so much in advance!
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<img alt="" src="image-tn-1.jpg" /><span>Title 1</span></li>
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2">
<img alt="" src="image-tn-2.jpg" /><span>Title 2</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<img alt="" src="image-tn-3.jpg" /><span>Title 3</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<img alt="" src="image-tn-4.jpg" /><span>Title 4</span></li>
</ul>
<!-- First Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-1" style="">
<img src="image-1.jpg" />
</div>
<!-- Second Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-2" style="">
<img src="image-2.jpg" />
</div>
<!-- Third Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-3" style="">
<img src="image-3.jpg" />
</div>
<!-- Fourth Content -->
<div class="ui-tabs-panel ui-tabs-hide" id="fragment-4" style="">
<img src="image-4.jpg" />
</div>
</div>
Fixed! Just needed to set a height for the rotator space.
thank you for your answer Erin H. it worked marvels :)
for the new ones that like me had a difficult time figurring it out this is how it should look. i've added the height at the end of the rotator space and it worked.
#rotator {
background:#FFF;
color:#000;
position:relative;
padding-bottom:2.6em;
margin:0;
font-size:16px;
--> height:275px;
}
Related
So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>
I'm using an image gallery code and i'm trying to make a javascript function that will jump to a different slide after a set time (in this case 6 seconds). I'm very confused about how to make it work. Below is the HTML code of the image gallery.
The function im trying to make is the 'SetTimeout (jump, 6000)' for the onclick in the navigation. The purpose of it is so that when the user clicks "prev" or "next" they are directed to the next slide, but after 6 seconds they are sent to a different slide.
If anyone could help me it would be greatly appreciated, ive been searching for a while now to figure out how to do it, but I don't have enough experience to figure it out.
<ul class="slides">
<div class="page-header" id="page-header">
<!--Begin slide 1 -->
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<video id="video1" width="100%" autoplay loop muted >
<source src="files/video/1.webm" type="video/webm">
</video>
</div>
<div class="nav">
<label for="img-3" class="prev" onclick="setTimeout(jump, 6000);"></label>
<label for="img-2" class="next" onclick="setTimeout(jump2, 6000);" ></label>
</div>
</li>
<!-- End slide 1 -->
<!--Begin slide 2 -->
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="video-container">
<div class="slide">
<video id="video2" width="100%" muted >
<source src="files/video/2.webm" type="video/webm">
</video>
</div>
</div>
<div class="nav">
<label for="img-1" class="prev" onclick="setTimeout(jump3, 6000);"></label>
<label for="img-3" class="next" onclick="setTimeout(jump4, 6000);"></label>
</div>
</li>
<!--End slide 2 -->
<!--Begin slide 3 -->
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="video-container">
<div class="slide">
<video id="video3" width="100%" >
<source src="files/video/3.webm" type="video/webm">
</video>
</div>
</div>
<div class="nav">
<label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label>
<label for="img-1" class="next" onclick="setTimeout(jump6, 6000);"></label>
</div>
</li>
<!--End slide 3 -->
</div>
</ul>
Can you elaborate the definition of your jump callback? And also in creating image gallery, you don't need to add the nav component on each slide. It should have only one instance on your image slider.
My snippet on creating simple image gallery:
<ul class="slide-gallery">
<li class="slide-container">
<!-- elements on each slide -->
</li>
<li class="slide-container">
<!-- elements on each slide -->
</li>
<li class="slide-container">
<!-- elements on each slide -->
</li>
</ul>
<!-- use for navigating on each slide -->
<div class="slide-nav">
<div class="prev">
</div>
<div class="next">
</div>
</div>
<!-- also use for navigating -->
<div class="slide-dots">
<div class="dot">
</div>
<div class="dot">
</div>
<div class="dot">
</div>
</div>
You can use this snippet or I will suggest to search some image gallery or carousel plugin. There are different plugins that will suit your needs. Based on the outcome that you want to achieve, I would suggest owl plugins - https://owlcarousel2.github.io/OwlCarousel2/ . There are a lot of styles that you can use like auto-play, responsive image gallery and lot more.
I would suggest avoiding inline JavaScript, so that you can add more complex functionality. Think about the following ideas:
When a new image is displayed, an timer (interval) going to the next image should be set (setTimeout).
The current timer should be cleared when the user hits a prev/next button. To call clearTimeout, you need to pass in the intervalID, which is returned from setTimeout.
I would store the current intervalID in a variable, and I would suggest using one function with an argument, instead of six functions:
var timer;
...
// an example click event handler for a prev/next button
prev1.addEventListener('click', function() {
clearTimeout(timer);
displayImage(3);
});
function displayImage(index) {
// load index image
var nextIndex = index<3 ? index+1 : 0;
timer = setTimeout(nextIndex, 6000); // get ready to display next image
}
Hi I have this piece of code that I would modify
<section id="imgTestata1" style="background-color:#f7f7f7; color:#ffffff; background-image:url(../asset/images/scatti/home1.jpg); padding-top:290px; padding-bottom:0px; background-position:Right top; background-size:cover;">
<div class="row-inner row-inner-full">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="colored-box wpb_animate_when_almost_visible wpb_bottom-to-top" style="max-width:550px; padding:35px 45px 50px; margin-left:40px;">
<img src="../asset/images/logo_trasparente.png" style="width:100%" />
</div>
<div class="vc_spacer" style="height:40px"></div>
<div class="sticky_navigation_wrapper">
<div class="sticky_navigation">
<div class="sn_inner">
<a href="#wrapper">
<div class="to_top"><i class="fa fa-caret-up"></i></div>
</a>
<ul>
<li>Innovazione</li>
<li>What's inside</li>
<li>Our Team</li>
<li>Features</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to add a javascript function that can allow me change the background image in the section named "imgTestata1"
Thanks
Not sure if you want to change the image or scroll it (probably the first)? Anyway:
Continuously scroll a div background image by animating its X position To scroll
http://www.jqueryscript.net/slideshow/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js.html To autochange it, demo here
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js/
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
I am using jQuery-ui for it's tab feature and also using bxSlider to slide images/content within only the first tab. However, when I click on the second tab the bxSlider "prev" and "next" options are still in my container. I tried using event.stopPropagation(), event.preventDefault() and stop() to stop the function, after realizing those didn't work I tried to create a function like this:
(function() {
$('#ab').click(function() {
$('#showcase').bxSlider({
controls: false,
});
});
});
where '#ab' is the tab and #showcase is the list element the images are located in. This function wouldn't exactly stop the bxSlider from being active, it would simply just hide the controls. However this did not work either.
Does anyone have any idea how this can be done?
Here is my HTML:
<div class="container">
<div id="tabs">
<ul>
<li><a id="sh" href="#showcase">Resumes</a></li>
<li><a id="ab" href="#about">About</a></li>
</ul>
<div id="showcase_container">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
<div id="about">
<span class="ab_title">Portfolio</span>
<ul id="portfolio_list">
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
<li class="item">
<a class="caption" name="resume1" href="#">
<img src="images/ty-headshot.jpg">
<span>
<big>Portfolio Title</big>
Quick Description of Portfolio Item
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my JavaScript:
//initialize tabs
$(document).ready(function() {
$('#tabs').tabs();
});
//initialize slider
$(document).ready(function(){
$('#showcase').bxSlider({
hideControlOnEnd: true,
infiniteLoop: false,
});
});
Any help would be greatly appreciated! If this cannot be done can someone please redirect me to a similar image/content slider so I can make this work?
Wrap the ul tag used for the slider in another div (called showcaseTab) or whatever. The bxslider will then be contained to that tab and the arrows should show and hide the correct way.
<div id="showcaseTab">
<ul id="showcase">
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
<li>
<img src="images/resume-temp1.jpg">
<img src="images/resume-temp2.jpg">
<img src="images/resume-temp3.jpg">
</li>
</ul>
</div>