I want image slider to work in such a way that on hover of tab or click it should change the coreesponsing image like you can always see on flipkarts home page. Now the script I have made is working like normal slider which changes the image in 5 seconds. Can anybody help me to achieve what I need.
HTML
<!--slide-part-starts--><div class="slide-part">
<!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
<ul class="tab-slide">
<li>POWEROCK 13600mAh Power Banks</li>
<li style="float:right">POWERPUNCH 10500mAh Power Banks</li>
</ul>
</div>
css
.slide-part{
width:100%;
max-width:1600px;
margin:0 auto;
min-height:100px;
height:100%
}
.fadein {
position:relative;
width:100%;
max-width:1600px;
margin:0 auto;
min-height:600px;
height:100%
}
.fadein img {
position:absolute;
left:0;
top:0;
height:auto;
max-width:100%;
width: auto\9;
}
.tabbed{
width:100%;
max-width:1600px;
margin:0 auto
}
ul.tab-slide{
margin:0;
padding:0
}
ul.tab-slide li{
list-style:none;
width:50%;
display:block;
float:left;
display:list-item;
text-align:center;
background:#00a3d3
}
ul.tab-slide li a{
position:relative;
color:#000;
text-decoration:none;
width:100%;
display:block;
color:#fff;
padding:15px 0 15px 0;
}
ul.tab-slide li:hover{background:#000;}
JS
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});
});//]]>
</script>
You can do this easy with some extra jQuery and adding some id's to your html.
First you have to add an id to the image within the HTML code:
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="linktoimage"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="linktoimage">
after that you add data-id to the hyperlinks:
<li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
<li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>
When you have done that you can add the following jQuery:
$('.tabbed a').on({
'mouseenter': function() {
$('.fadein img').hide();
$('#' + $(this).data('id')).fadeIn();
}
This should do the trick. JSFIDDLE over here: https://jsfiddle.net/enhtymgk/1/
Related
How to show my div inner overflow scroll? i need show this div. I did position absolute and z index but not showing div. it is showing inner parent div. Someone help me? Thanks a lot :)
<div class="otobus_alan">
<div class="otobus">
<a href="" class="koltuk">Koltuk
<div class="ekstra_div">
Test
</div>
</a>
</div>
</div>
.otobus_alan {
width:600px;
height:200px;
overflow-x:auto;
position:relative;
margin-top:100px;
z-index:1;
}
.otobus {
float:left;
display:block;
width:1000px;
height:180px;
background:red;
position:relative;
z-index:1;
}
.ekstra_div {
position:absolute;
display:none;
z-index:2;
padding:25px;
background:blue;
width:50px;
height:50px;
top:-40px;
left:100px;
}
.koltuk {
float:left;
background:white;
}
.koltuk:hover .ekstra_div {
display:block;
}
https://codepen.io/musti_nation/pen/RyZBoe
We have a product page that we are dividing in two. My goal is to make it so that when you click one of the divs it slides to fill the whole page and show the products.
http://jsfiddle.net/Sj575/
HTML
<div>
<div id="green" class="type1">Exterior products</div>
<div id="red" class="type2">Interior products</div>
</div>
CSS
.type1 {
width:300px;
background-color:green;
display:inline-block;
height:320px;
}
.type2{
width:300px;
background-color:red;
display:inline-block;
height:320px;
}
Try this. ;)
http://jsfiddle.net/ph31wyy3/1/
HTML
<div>
<div id="green" class="green block">eezez</div>
<div id="red" class="red block">eezez</div>
</div>
CSS
.green {
width:400px;
background-color:green;
display:block;
height:320px;
float: left;
}
.red{
width:200px;
background-color:red;
display:block;
height:320px;
float: left;
}
JS
$(function() {
$('.block').on('click', function(){
$('.block').not(this).animate({'width' : '0' }, 500, function() { $(this).hide(); });
$(this).animate({'width' : '100%'}, 500);
});
});
with the following jQuery (and some html/css changes), you get this: http://jsfiddle.net/Sj575/274/
$(function() {
$(".green").click(function() {
$(".red").toggleClass("hidden");
$(".green").toggleClass("full")
});
$(".red").click(function() {
$(".green").toggleClass("hidden");
$(".red").toggleClass("full")
});
});
EDIT: Here's another one that slides in instead, http://jsfiddle.net/Sj575/277/
I want to highlight (transparent color with border smaller than the image tab) my menu items using hover through javascript. But, I can't seem to get it right. As an dded effect, when the menu tab is clicked, I want to have a bouncing animation for my image tab. Can this be done?
Here's my javascript code.
<script type="text/javascript">
$(function () {
$("img").hover(
function () {
$(this).addClass('highlight');
},
function () {
$(this).removeClass('highlight');
});
});
HTML:
<ul class="menu_tab">
<li><img src="images/top_menu_tabs/kaiiki.jpg" alt="tab1" />
<div class="highlight"></div>
</li>
</ul>
CSS:
ul.menu-tab
{
z-index:0;
list-style:none;
overflow:hidden;
margin:0px;
padding:0px 0px 0px 10px;
}
ul.menu-tab li
{
display:block;
color:#ffffff;
margin-right:0px;
margin-bottom:0px;
position:relative;
overflow:hidden;
cursor:pointer;
}
ul.menu-tab a
{
display:block;
width:60px;
height:50px;
overflow:hidden;
border:0;
}
ul.menu-tab a:hover
{
color:green;
background-color:#ccffcc;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
width:50px;
border:20px solid green;
}
.highlight
{
color:Green;
width:auto;
width:auto;
padding:0;
}
The image I want to achieve is something like this: http://www4.kaiho.mlit.go.jp/CeisNetWebGIS/
Here are some more examples brainjar Demo More from Brainjar
I'm using the SlidesJS product example found here http://slidesjs.com/examples/product/
I want to have more than 1 of these units on the page, but when just copying the markup for it and pasting below doesn't work right. The first one will show up fine, but the second one only shows the 2 pagination elements and are unclickable. My main question is why would my approach of just copying the slider again not work, and is my general approach totally wrong? Is there some quirk with SlidesJS or Jquery in general that requires me to create separate css divs or something like that?
HTML:
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp1.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp3.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
CSS:
#containerSlides {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
float:left;
}
#products_example {
width:600px;
height:282px;
position:relative;
}
/*
Slideshow
*/
#products {
margin-left:26px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#products .slides_container {
width:360px;
/*overflow:hidden;*/
float:left;
position:relative;
border:1px solid #dfdfdf;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:360px;
height:268px;
display:block;
}
/*
Next/prev buttons
*/
#products .next,#products .prev {
position:absolute;
top:127px;
left:0;
width:21px;
height:0;
padding-top:21px;
overflow:hidden;
display:block;
z-index:101;
}
#products .prev {
background:url(../img/arrow-prev.png);
}
#products .next {
left:398px;
background:url(../img/arrow-next.png);
}
/*
Pagination
*/
#products .pagination {
width:55px;
padding:5px 5px;
float:left;
margin-left:30px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#products .pagination li {
float:left;
margin:2px 4px;
list-style:none;
}
#products .pagination li a {
display:block;
width:55px;
height:41px;
margin:1px;
float:left;
background:#f9f9f9;
}
#products .pagination li.current a {
border:1px solid #7f7f7f;
margin:0;
}
Without seeing the javascript its impossible to say exactly where the issue is, however there are some immediate issues with the markup.
You have multiple elements on the page with the same id's (containerSlides, products_example, products).
Giving the second container unique id's will help solve the problem. You will then probably (again, cant say for sure without seeing the javascript) need to add another 'initialization' call to set up slidesjs on the second container as well as adding the id to your css so that the second container gets the same styling.
Ex:
Markup
<code>
<div id="secondContainerSlides">
…
</div>
</code>
Css
<code>
#containerSlides,
#secondContainerSlides{
…
}
</code>
I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)