This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
what is the solution to remove/add a class in pure javascript?
Firstly forgive what seems to be a simple javascript question, I have just started getting to grasps with the language. I have seen numerous posts on showing and hiding content by either classes or ids, but they all seem to apply to one at a time. I would like to change three classes at a time and what display change is depends on what links the user has all ready clicked on. Confusing explanation I know but my example with code is below.
I am building an image gallery with a series of thumbnails that all have classes assigned to them; .photo, .print and .logo. The desire is to have four 'buttons'; photo, print, logo and display all. When the user clicks "photo" the code will set .photo to display:block, and .print and .logo to display:none. When the user clicks "print" the code will set .print to display:block, and .photo and .logo to display:none. When the user clicks "logo" the code will set .logo to display:block, and .photo and .print to display:none. And obviously when the user clicks "display all" all classes are set to display:block.
<div id="menu">
<ul class"toplevel">
<li id="photoselect">Photography</li>
<li id="logoselect">Print</li>
<li id="printselect">Logo</li>
</ul>
</div>
<div id="content">
<img class="thumb photo" src="photo/photo01.jpg">
<img class="thumb photo" src="photo/photo02.jpg">
<img class="thumb print" src="photo/photo03.jpg">
<img class="thumb print" src="photo/photo04.jpg">
<img class="thumb logo" src="photo/photo05.jpg">
<img class="thumb logo" src="photo/photo06.jpg">
</div>
Or you could take advantage of css3 (for browser which support it)
<!doctype html>
<html>
<head>
<style>
#content > input.hidden{ display:none; }
#content > a{ display:none; }
#po:checked ~ a.photo{ display:block; }
#pi:checked ~ a.print{ display:block; }
#lo:checked ~ a.logo{ display:block; }
#al:checked ~ a{ display:block; }
</style>
</head>
<body>
<div id="menu">
<ul class"toplevel">
<li><label for="po">Photography</label></li>
<li><label for="pi">Print</label></li>
<li><label for="lo">Logo</label></li>
<li><label for="al">All</label></li>
</ul>
</div>
<div id="content">
<input type="radio" name="bfc" id="po" class="hidden" />
<input type="radio" name="bfc" id="pi" class="hidden" />
<input type="radio" name="bfc" id="lo" class="hidden" />
<input type="radio" name="bfc" id="al" class="hidden" />
<img class="thumb" src="photo/photo01.jpg">
<img class="thumb" src="photo/photo02.jpg">
<img class="thumb" src="photo/photo03.jpg">
<img class="thumb" src="photo/photo04.jpg">
<img class="thumb" src="photo/photo05.jpg">
<img class="thumb" src="photo/photo06.jpg">
</div>
</body>
</html>
Just to give you an idea of how to do it without any libraries (and with the HTML you posted), here's a basic way of going about it:
Add an event listener on the link you want to respond to a click event for
On click, go through all of the matching elements and change their style
It's good to cache your photos prints and logos so that you don't have to query for them on each click.
var content = document.getElementById('content');
var photos = content.getElementsByClassName('photo');
var prints = content.getElementsByClassName('print');
var logos = content.getElementsByClassName('logo');
function changeDisplay(elements, display) {
var i = 0, l = elements.length;
for( ; i < l; i++) {
elements[i].style.display = display;
}
}
document.getElementById('photoselect').addEventListener('click', function (e) {
changeDisplay(prints, 'none');
changeDisplay(logos, 'none');
changeDisplay(photos, 'block');
}, false);
Related
So I am having a problem with trying to create drop up menu on click.
First of all, there is the real site that I am working on. https://socialmanagement.000webhostapp.com/
under 736px width, the menu will turn to one button. The problem is that on mobile devices it's really buggy. If you click it on phone, it will automatically proceed you to the "href" of the last button in the menu even if it's not showing. Also, the menu won't go down after another clicking the "home" button
I need to drop up to a menu that I click on the button (the button will stay in the same position not like right now where it goes up) and it will stay until user clicks on it once again.
Thank a lot for any advice
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<img src="images/Icons/home.png" />
<div class="dropup-content" >
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT (the First scrip that I got here was bad so I have to change it to this one, still can't close it from a mobile device):
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
EDITED:
First of all, in your provided HTML code, there is no myDropdown element. So, first we need to add that id to the dropup-content element. Then, we can just toggle a class of show when the a or in your case, the icon, is clicked. So, here it is:
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<!-- You don't need javascript void here, we just won't include href.-->
<a class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" /> </a>
<!-- We add id="myDropdown" to the dropup-content element.-->
<div class="dropup-content" id="myDropdown">
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show")
}
// This is all you need to toggle on/off the menu,
// no need of that extra function with a for loop that you have in your code.
Of course, this goes without saying, you must edit the show class in your CSS in a way that you would like it to look.
As for the other question, how to stick the menu in a same position, you just add position: absolute to that element in your CSS, with the top/left/right/bottom coordinates that you like, and give it a z-index: 2(or higher) to make sure its on top of every other element. Hope this clears your issues.
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'm using the Superslides script to create a responsive slideshow for a site. I have created a basic caption box that I want to be hidden and then slide in from the bottom when the slide going with the caption is display.
In the Superslide script the current slide gets a higher z-index (of 2, otherwise it is set to 0) and a display: block (otherwise 'none') change to it when it's coming into view.
I am not very good with Javascript so I am having a bit of trouble targeting my captions to animate in at the right time. I put together a script that is supposed to evaluate all the li tags (each li is a different slide) and if it has a z-index of 2 it changes the bottom margin of the caption div so it slides into view. My problem is that my script only targets the very first li instead of running through all of them. For the first li it works great, I just need it to run though the rest of the li's as well. Any suggestions are appreciated!
Script:
var li = document.querySelector('li[style]'),
inlinezIndex = li.style.zIndex;
console.log(inlinezIndex);
if(inlinezIndex == 2){
document.getElementById('caption').style.bottom = '300px';
$('#caption').css({'transition': '10s'});
}
else{
document.getElementById('caption').style.bottom = '0px';
}
HTML:
<div id="slides">
<ul class="slides-container">
<li class="slide1">
<img src="images/people.jpeg" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work2</p>
</div>
</li>
<li class="slide1">
<img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work3</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work4</p>
</div>
</li>
</ul>
<nav class="slides-navigation">
<i class="icon-chevron-right"></i>
<i class="icon-chevron-left"></i>
</nav>
</div>
Try using querySelectorAll instead of querySelector.
You could then loop through the li's and apply your styling, etc.
Also I see you are using multiple elements with the same id ("caption") and this is bad practice. Actually, I think it's invalid HTML according to the HTML5 specification as id's are supposed to be unique (look at this stackoverflow thread).
Example
var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
var li = list[i];
var zIdx = li.style.zIndex;
// Use a class instead of id for captions
var caption = li.querySelector('.caption');
if (zIdx == 2) {
caption.style.bottom = '300px';
} else {
caption.style.bottom = '0px';
}
}
I'd also put css transitions in css (handy-dandy transitions):
.caption {
transition: bottom 10s;
}
If div .element has specific class .block / <div class="element block"> then delete html node .element img
HTML:
<div class="element">
<img src="images/picture.jpg" alt="" />
<img src="images/picture.jpg" alt="" />
</div>
Want to delete img, how to do this by Jquery?
Why not something simple like that?
$('.element.block').find('img').remove();
$('.element.block img').remove ()
This removes only images which are in blocks with the both classes
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>