I have a 2-tab content slider for the mobile section of my site. The user clicks on the linked image within the <li> element and the corresponding content loads. I would like the image to change color when in an "active" state, so pretty much a new image to be loaded when the user clicks it.
This is only for mobile sites so please bear that in mind when offering solutions. Thanks All!!
<div id="tabs" class='tabs no-screen no-ie'>
<ul>
<li>
<img src="img/mobile/bingo.png" width="70" height="70" alt="Super Free Bingo" />
</li>
<li>
<img src="img/mobile/slots.png" width="70" height="70" alt="Super Free Logo" />
</li>
</ul>
<div id='tab-1' class="tab-box">
<?php include 'includes/sfb.php'; ?>
</div>
<div id='tab-2' class="tab-box">
<?php include 'includes/sfsg.php'; ?>
</div>
</div>
If I understood that correctly, when the user clicks the image, the image changes. Seeing as you only have two images, we can do the following:
Add a unique id to your target images.
<img src="img/mobile/bingo.png" id="image-1">
<img src="img/mobile/slots.png" id="image-2">
Add a JavaScript OnClick event for each image that will also reset the other image.
$('#image-1').click(function() {
$(this).attr('src', 'img/mobile/newImage1.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-2').attr('src', 'img/mobile/slots.png');
$('#image-2').parent().parent().css('background-color', 'orange');
});
$('#image-2').click(function() {
$(this).attr('src', 'img/mobile/newImage2.png');
$(this).parent().parent().css('background-color', 'white');
$('#image-1').attr('src', 'img/mobile/bingo.png');
$('#image-1').parent().parent().css('background-color', 'orange');
});
Check This Demo for reference
Demo
$(".a").click(function(){
$(".a").each(function(index){
$("#id"+(index+1)+" a img").attr('src',a[index]);
});
var x=$(this).attr('id');
var y=x.split('id')[1];
$("#id"+(y)+" a img").attr('src',b[y-1]);
});
Related
I've 5 different static pages: index.html syllabus-link.html advanced-linux.html contact.html gallery.html.
The functionality is quite simple - User clicks on one of the syllabus type and the user is presented with a `word file' having 2 options:
1) Download
2) View its contents.
The syllabus menu-header is not clickable, but when the user hovers on it, it would list the syllabus types in its dropdown-menu.
Let's say, I'm on index.html page and being there, I decided to click on "Linux" option from the dropdown-menu of syllabus page. The Linux word file gets displayed on the screen with options for the user to either view it's contents or download the word file(based on jQuery condition written in syllabus page). Now that I've landed on the syllabus page and this time when I try clicking on other options viz.., "Hadoop" or "CCNA", nothing shows up. But had I tried clicking either of "Hadoop" or "CCNA" option being on index.html page, it displays the correct "word file".
From external page ==> click works
Being on syllabus page ==> click doesn't work
Functionality is similar to what is shown ==>> https://www.atcs.com/ ABOUT US
section
I understand that if I write <a href="#">in syllabus page, then the current issue can be fixed, but I would lose the current working functionality. How do I achieve both?
Any help would be highly appreciated !!!
index.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">Home</li>
<li><a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>Advanced Linux</li>
<li>Contact Me</li>
<li>Personal Gallery</li>
</ul>
</nav>
</div>
</div>
syllabus-link.html
<div class="row">
<div class="headerlogo four columns">
<div class="logo">
<a href="index.html">
<h4>Linux classes</h4>
</a>
</div>
</div>
<div class="headermenu eight columns noleftmarg">
<nav id="nav-wrap">
<ul id="main-menu" class="nav-bar sf-menu">
<li class="current">
Home
</li>
<li>
<a>Syllabus</a>
<ul class="syllabus-options">
<li><strong>Linux</strong></li>
<li><strong>Hadoop</strong></li>
<li><strong>CCNA</strong></li>
</ul>
</li>
<li>
Advanced Linux
</li>
<li>
Contact Me
</li>
<li>
Personal Gallery
</li>
</ul>
</nav>
</div>
</div>
<div id="linuxSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Linux syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="hadoopSyllabus" style="text-align: center;">
<!-- GOOGLE MAP IFRAME -->
<font color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>View
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="syllabus.htm" view> <img border="0"
src="images/icon_word.png" alt="syllabus" width="75" height="75">
</a>
</p>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the word icon to <font color="blue"><blink>Download
</blink></font> the complete Hadoop syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/0- Linux-Syllabus-Jan-2015.rtf" download> <img
border="0" src="images/icon_word.png" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
<div id="ccnaSyllabus" style="text-align: center;">
<font color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>View
</blink></font>the complete CCNA syllabus:<br><br>
<a href="documents/2- CCNA-Syllabus.pdf" target="_blank">
<img border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75" height="75">
</a>
</b>
</h5></font>
<br> <font color="red" size="20px"><b> OR </b></font><br> <font
color="red"><h5>
<b>Click on the PDF icon to <font color="blue"><blink>Download
</blink></font> the complete CCNA syllabus:
</b>
</h5></font>
<p align="center">
<a href="documents/2- CCNA-Syllabus.pdf" download> <img
border="0" src="images/icon_pdf.jpg" alt="syllabus" width="75"
height="75">
</a>
</p>
</div>
JS file within syllabus-link.html
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
if (document.getElementById(anc) == linuxSyllabus) {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (document.getElementById(anc) == hadoopSyllabus) {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (document.getElementById(anc) == ccnaSyllabus) {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
});
</script>
Thanks for making it more clear on what you are trying to accomplish, the html and javascript you added helps significantly. The issue you are seeing is the javascript is only being run once on page load. I would recommend wrapping that up in a function, that way you can call it on page load, as you are doing now, as well as every time one of those links is clicked.
js file within syllabus
<script type="text/javascript">
$(document).ready(function() {
// this will get called when you want to swap the visible div
function updateVisibleDiv(viewName) {
// we are going to pass in a string as viewName, we want to check it against a string
// also, I added show for each syllabus, since we will be calling this to change
// which syllabus is visible, we have to show the one they select
if (viewName == 'linuxSyllabus') {
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#linuxSyllabus").show();
} else if (viewName == 'hadoopSyllabus') {
$("#linuxSyllabus").hide();
$("#ccnaSyllabus").hide();
$("#hadoopSyllabus").show();
} else if (viewName == 'ccnaSyllabus') {
$("#linuxSyllabus").hide();
$("#hadoopSyllabus").hide();
$("#ccnaSyllabus").show();
}
}
// this will get run on page load - I like wrapping it in a function to make
// it more clear what we are doing on page initialization
function init() {
var syllabus = window.location.href.split('#')[1];
// syllabus should equal one of ['linuxSyllabus', 'hadoopSyllabus', 'ccnaSyllabus']
// we pass it in to our function, and it loads the correct screen
// up to this point, the page will work the same as it always has, this is just a refactor
updateVisibleDiv(syllabus);
}
// this will be the new functionality that updates which syllabus is visible
// this will be called when a link is clicked
function updateView() {
// get the value in your href from the clicked link
var syllabus = this.getAttribute('href').split('#')[1];
// now we will just update the visible div
updateVisibleDiv(syllabus);
}
// we are going to attach a click event to those three links
// this is selecting all 3 links by their id, and adding an on click event handler
$('#linux, #hadoop, #ccna').on('click', updateView);
// call the init function to initialize the page
init();
});
</script>
Disclaimer: I wasn't able to test this myself, let me know if you have any issues and I can try to help you work through them.
One big problem is that your conditionals within the if and else if statements should be using strings.
eg. if (document.getElementById(anc) == 'linuxSyllabus')
Secondly, you are using selectors within each conditional, and as far as I can tell those id's do not exist in the html. Your id's are linux, hadoop, and ccna.
You will want to select those as $('linux') OR by the href like this:
$("a[href='#linuxSyllabus'")
I'm somewhat unsure of the problem you are actually looking to solve, but those are some code issues that jump out at me. Also try checking the console in your browser and you'll surely see some errors.
I don't know it is what you looking for or not. I just give a solution whatever I can understand from your description.
You can use a common class for every syllabus container in syllabus like .syllabusContainer and change js like below
<script type="text/javascript">
$(document).ready(function() {
var anc = window.location.href.split('#')[1];
var pageURL = $(location).attr("href");
$(".syllabusContainer").hide();
$("#"+anc).show();
});
</script>
in syllabus page use same menu link as index.html
I'm a trainee and actually I'm working on a web shop.
Now I got the problem that I have multiple images placeholders (image_1-6) for our article images. Problem now is, if the article only has 2 images the placeholders for the other 4 are still there. So is there any possibility to hide them if the src is empty or a parameter defined by me?
Here is the code snippet:
<div class="sideimg grid_2">
<div id="image_1" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
</a>
</div>
<div id="image_2" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
</a>
</div>
<div id="image_3" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
</a>
</div>
<div id="image_4" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
</a>
</div>
<div id="image_5" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
</a>
</div>
<div id="image_6" class="lb_thumb">
<a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
<img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
</a>
</div>
</div>
Here is the live version(wip): http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423?
All I know about html css and js I learned by myself so I hope the snippet is fine.
So as you can see I have 6 images with js image swap. The only left problem is that our database don't contains an image for every placeholder, so if there are only 4 pictures there are still 2 empty boxes. So how can i get rid of them?
Thanks all for your help and excuse my english I'm from Germany.
You can try using the CSS selector for html attributes like this:
.lb_detailimg[src]{
(Whatever css u need goes here)
display: block;
}
.lb_detailimg{
display: none;
}
If any <img> of class lb_detailimg does not have a src attribute it will not be displayed.
You could also use a keyword in the src attribute to make this happen, like this:
.lb_detailimg{
(Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
display: none;
}
EDIT:
As you cannot give style to a parent element in CSS here is a JS snippet that should work fine:
window.onload = function(){
var img_containers = document.getElementsByClassName("lb_thumb");
for(var i=0; i<img_containers.length;i++){
if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
img_containers[i].style.display = "none";
}
}
}
At line 4 in the if ==> .indexOf("yourKeyWordHere")
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I have two audio tags in these markup. my problem is that the second one won't play
<div class="container">
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
</div>
And here is the script that plays the track
$(".play-bt").click(function(){
var $artItem = $(this).parent(".art-item");
console.log($artItem);
$artItem.find('audio').play();
$artItem.find(".message").text("Music started");
});
My problem is that I can only play the first audio tag. what can I do to play the second tag or 3rd audio tag if there's more? the counter is the one that is selecting what audio tags to play. but as of now I have no idea how would I make the second audio tag or user selected audio tag if the are more audio post in this markup.
not 100% sure that's the only issue but you use id a lot. id's should be unique on a page. Replace them by classes
And your references are wrong.
$("#play-bt").click(function(){
// -> will allways try to play song indicated by counter (0)
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
I don't think you want that? Don't you want to play the audio in the "post-container" ?
you could do something like this:
$(document).ready(function(){
$(".play-bt").click(function(){
var $post= $(this).parents(".post-container");
$post.find('audio')[0].play();
$post.find(".message").text("Music started");
});
});
=> and changing the play-bt and message id's into classes
The reason why things don't work for you is because of your markup... in your code you try to obtain "parent" of the clicked "play-bt" class, yet "art-item" is NOT parent in your DOM structure. What probably makes you think it is, is your incorrect markup indentation...
How can I get an Image overlay to work with this code?
What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.
http://socialartist.co/index.html
The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:
<ul class="items x_columns">
<li data-id="id-1" data-cat="#luxury">
<div class="preview"><a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/></a>
</div>
<a class="title" href="#">Kirkbridge DNB</a>
<p>UK | Drum and Bass</p>
</li>
When I try to add a new div it just breaks the design (eg messes up the preview class border)
Is there 'an easy way' to just overlay onto an existing image, as above.
I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?
If I got it right:
Add the icon you want to dispay inside the anchor tag:
Quick and dirty example: http://jsfiddle.net/ZVSVw/
<a href="#" class="frame">
<img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/>
<div class=overlay>ICON</div>
</a>
Set it to display: none by default and style it with the selector .frame:hover > .overlay.
To your comment
remove the following line from your style.css:1654:
a > .frame:hover, a.frame:hover{
background: #ffffff;
/* border: 1px solid #24bfb6; remove this line */
}
You could add the other overlay picture with the display: none; property set and then basically toggle between the two pictures fiddle
Javascript:
jQuery('li[data-id="id-3"] > div').on('hover', 'a', function() {
jQuery(this).find('img').toggle();
jQuery(this).find('div.overlayContent').toggle();
});
Html:
<li data-id="id-3" data-cat="#holiday">
<div class="preview">
<a href="#" class="frame">
<img src="http://..." alt="default picture">
<div class="overlayContent" style="display: none;">...overlay content</div>
<!--img src="http://..." alt="alternate picture" style="display: none;"-->
</a>
</div>
<a class="title" href="#">TEST ME!</a>
<p>Test this one!</p>
</li>