Someone can help me add next and prev button for this slider. I found this code in blog,...
Here, this code http://jsfiddle .net/dk5sy93d/
I'm new to Jquery (since yesterday). I have to make a simple slider in an upcoming web development competition. This is just something I wrote because everything I seem to come across has a large library attached to it.
//Manual Slider Control Jquery
$("#slider-next").click(function(){
if($(".slider-a").is(":visible")){
$(".slider-a").hide(3000);
}else{
$(".slider-b").hide(3000);
}
});
$("#slider-prev").click(function(){
if(($(".slider-a").not(":visible")) && ($(".slider-b").is(":visible"))){
$(".slider-a").show(3000);
}else if(($(".slider-a").not(":visible")) && ($(".slider-b").not(":visible"))){
$(".slider-b").show(3000);
}
});
/* Slider CSS */
#slider-container{
margin:auto;
text-align:center;
}
#slider-content{
margin:auto;
height:300px;
width:400px;
overflow:hidden;
border:2px solid #000;
background-color:grey;
}
#slider-controls{
margin:auto;
text-align:center;
width:400px;
}
#slider-controls button{
background-color:#000;
padding:0 15px;
font-size:1em;
border-radius: 0 0 15px 15px;
color:white;
}
#slider-prev{
float:left;
}
#slider-next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider-container">
<div id="slider-content">
<img class="slider-img slider-a" src="http://www.light2015.org/.imaging/stk/pop/zoom/dam/CosmicLight/A-Universe-of-Images/Vela_Supernova_Remnant/jcr:content/Vela_Supernova_Remnant.2014-07-17-20-32-16.png" width="400px" height="300px" />
<img class="slider-img slider-b" src="http://www.sciuridae.co.uk/photography/images/blown_out_skies/two_images.jpg" width="400px" height="300px" />
<img class="slider-img clider-c" src="http://www1.hw.ac.uk/estate/images/landscape-images/cycleways-and-footpaths-big.JPG" width="400px" height="300px" />
</div>
<div id="slider-controls">
<button id="slider-prev">Previous</button>
<button id="slider-next">Next</button>
</div>
</div>
Please comment on this answer if you feel it can be simplified further and offer the same (if not improved) functionality.
Here is the JS for your HTML.
http://jsbin.com/nalewayume/1/edit?js,console,output
function nextSlide() {
if(currentSlide < allSlides) {
$slide.eq(currentSlide).fadeOut(200);
$slide.eq(currentSlide + 1).fadeIn(200);
currentSlide+=1;
}
}
Related
I am trying to debug a legacy web application that uses bootstrap.js to raise a modal and gray out the page underneath. Warning, I am NOT a JS/HTML/CCS dev, but apparently this is mine now.
The code working properly depending on the iframe. When the iframe consists of standard html, it seems to work fine. When the iframe consists of this strange sort-of HTML produced by WebFocus (that only renders properly in IE).
Anyway, when the modal opens, the following changes are made to the DOM:
This div tag is added to the body element:
<div class="modal-backdrop fade in"></div>
The associated styles are these:
/*media all*/
.in.modal-backdrop {
filter: alpha(opacity=50);
opacity: 0.5;
}
/*media all*/
.fade.modal-backdrop {
filter: alpha(opacity=0);
opacity: 0;
}
Also, the open-modal style is applied to the body element like so:
<body class="modal-open">
With the associated style:
/*media all*/
.modal-open {
overflow: hidden;
}
Now I would expect that the modal-backdrop style to have to apply to something other than an empty div tag for it to work. How does that work? Why would it work when applied to one type of iframe but not another.
The iframe is as follows:
<iframe name="Report Content" width="100%" height="400" title="Webfocus HTML Report" id="htmlReportFrame" src="/path/to/webfocus/report?reportParam=123456" onreadystatechange="readyStateChange()" onload="return readyStateChange();">Your
browser does not support IFRAMES</iframe>
The report reference by the iframe (/path/to/webfocus/report?reportParam=123456) returns this:
<html>
<head>
<title>Figure 1</title>
<style type="text/css">
<!--
#media screen {
.spacer { height:792pt; }
}
#media print {
.spacer { height:792pt; }
}
.x1 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
color:#000000;
}
.x2 {
white-space:nowrap;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000000;
}
.x3 {
white-space:nowrap;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000000;
text-align:left;
}
.x4 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
text-align:center;
}
.x5 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x6 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x7 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x8 {
white-space:nowrap;
font-family:Courier New;
font-size:12pt;
}
.x9 {
white-space:nowrap;
font-family:Courier New;
font-size:12pt;
}
-->
</style>
</head>
<body>
<div style="position:relative" class="spacer">
<div style="position:absolute;top:216pt;left:104pt;width:434pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
font-size:1pt"></div>
<div style="position:absolute;top:237pt;left:104pt;width:432pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
font-size:1pt"></div>
<div style="position:absolute;top:218pt;left:104pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<div style="position:absolute;top:218pt;left:536pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<IMG SRC="file:///C:/orange_purple25x12.gif" style='position:absolute;left:108pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/blueline5025x12.gif" style='position:absolute;left:252pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/yellowlavender25x12.gif" style='position:absolute;left:396pt;top:222pt;width=25pt;height=12pt;' >
<div style="position:absolute;top:221pt;left:136pt; text-align:left;">
<span class='x5'>Category 1</span></div>
<div style="position:absolute;top:221pt;left:280pt; text-align:left;">
<span class='x6'>Category 2</span></div>
<div style="position:absolute;top:221pt;left:424pt; text-align:left;">
<span class='x7'>Category 3</span></div>
<div style="position:absolute;top:0pt;left:36pt; text-align:left;">
<span class='x2'> </span></div>
<div style="position:absolute;top:11pt;left:36pt; text-align:left;">
<span class='x3'>Figure Name</span></div>
<div style="position:absolute;top:23pt;left:297pt; text-align:left;">
<span class='x4'>United</span></div>
<IMG SRC="file:///C:/IBIUniqueName0.png" style='position:absolute;left:36pt;top:33pt;' >
<div style="position:absolute;top:28pt;left:36pt; text-align:left;">
<span class='x8'> </span></div>
</div>
</body>
</html>
It looks like standard html, except that it reference local image files (for example file:///C:/IBIUniqueName0.png) that don't exist. I believe that they are being delivered to the browser using some sort of strange mime type, but I don't know how.
I can post more code, but I need to remove sensitive information.
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
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/
I have a page with lots of large images set to 100% width. The navigation takes you to each individual image. I want the background of the link that ties to the div that is in focus to change color either because it was scrolled to or the link was clicked.
html:
<!------ Start Header Wrapper ------>
<div class="HeadWrapper">
<!------ Start Head ------>
<div class="Head">
<!------ Logo Box ------>
<div class="Logo">
<img src="_images/nav/PrimalLogo.jpg" />
</div>
<!------ Navigation links when in mobile all links except shop will go under a menu icon. ------>
<div class="NavSpan">
Helix
Originals
Black Label
Military
Beer & Rock
Custom
Community
</div>
<div class="clear"></div>
</div>
<!------ End Head ------>
<!------ Transparent BG ------>
<div class="HeaderBG"></div>
</div>
<!------ End Header Wrapper ------>
<!------ Start Images ------>
<div id="LBHome">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBMHelix">
<img src="_images/bodyImages/02_Lookbook.jpg" />
</div>
<div id="LBWHelix" class="theme-default">
<div id="slider" class="nivoSlide">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
<img src="_images/bodyImages/02_Lookbook.jpg" />
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
</div>
<div id="LBMOriginals">
<img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
<div id="LBWOriginals">
<img src="_images/bodyImages/04_LB_Helix.jpg" />
</div>
<div id="LBBlackLabel">
<img src="_images/bodyImages/05_LB_Helix.jpg" />
</div>
<div id="LBMilitary">
<img src="_images/bodyImages/06_WMS-Helix.jpg" />
</div>
<div id="LBBandR">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCustom">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCommunity">
<img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
css:
body {
line-height: 1;
background:#1e1e1e;
}
* {
margin:0 auto!important;
padding:0 auto!important;
}
img {
width:100%;
border: none;
}
a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:13px;
line-height:18px;
color:#B70809;
}
a:link, a:visited {
color:#b70809;
text-decoration:none;
outline:none;
outline-width:0;
border-width:0;
}
a:hover, a:active {
color:#7c7c7c;
}
/*------------------------------------*\
Header
\*------------------------------------*/
.HeadWrapper {
width:100%;
height:80px;
z-index:100;
clear:both;
position:fixed;
border-bottom:1px #1e1e1e solid;
top:0;
left:0;
}
.HeaderBG {
position:absolute;
top:0px;
left:0px;
width:100%;
height:80px;
background-color:#1e1e1e;
z-index:101;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:.7;
}
.Head {
position:relative;
width:1000px;
height:80px;
z-index:105;
display:block;
}
.Logo {
width:86px;
float:left;
}
/*------------------------------------*\
NAV
\*------------------------------------*/
.NavSpan {
float:left;
}
.NavSpan a {
font-family:Helvetica, Arial, sans-serif !important;
font-size:14px;
line-height:18px;
color:#FFFFFF;
text-transform:uppercase;
line-height:80px;
margin-left:40px !important;
letter-spacing:1px;
}
.NavSpan a:focus {
background:#b70809;
}
.NavSpan a:active {
background:#b70809;
}
I tried doing it with an :focus or :active tag. I know there is a lot that I can do with JavaScript but I was attempting to leave out any JavaScript if possible. I desire that when a user scrolls down the page the red box under the nav item moves with the section they are in. I know I can do it with a parallax scroller or by getting window position and setting actions to happen at certain positions just wasn't sure if there was an easier way to do this.
Try this function. It will change the CSS background-color of the div when a click is made on the image, you can change that to anything!
$('document').ready(function () {
$('img').click(function () {
$('div').css('background-color', '#hexcode');
});
});
Remember: Show us your code first! Tell us what you were doing and what went wrong. We will help you. Instead these guys are going to downvote you buddy. Try to keep this in mind for the next question as this not a freelancer site. Its a Q&A site, you ask about what is wrong we tell! That's how it goes. Also, I would like to advise you to go to this site and learn some jQuery. jquery.com. You need to polish your JavaScript talent! :)
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! :)