Below is a jsfiddle file for reference.
Im trying to make it so that when you press a button (1,2,3,4) the image that relates shows on click and overlaps with images as you click more numbers. I tried ----
$('#showButton').click(function() {
$('#img3').show();
return false;
});
But it isn't working.
Is there a way to say when clicking this button show #img1
and when clicking another button #img2 overlaps that image
Thank you so much!
HTML
<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<h1>Question here</h1>
<button onclick="picture()">1</button>
<button onclick="picture()">2</button>
<button onclick="picture()">3</button>
<button onclick="picture()">4</button>
<button onclick="picture()">5</button>
</br>
</br>
</br>
<!-- ////images -->
<img src="line-01.png" id='img1'>
<img src="line-02.png" id='img2'>
<img src="line-03.png" id='img3'>
<img src="line-04.png" id='img4'>
<img src="line-05.png" id='img5'>
<img src="line-06.png" id='img6'>
<img src="line-07.png" id='img7'>
<img src="line-08.png" id='img8'>
<img src="line-09.png" id='img9'>
css
img {/* display:none;*/
position:absolute;
width:200px;}
You could pass the number corresponding to the picture to show for that button in the onclick of that button:
<button onclick="picture(1)">1</button>
<button onclick="picture(2)">2</button>
<button onclick="picture(3)">3</button>
Then for your function:
function picture(n) {
$("#img"+n).show();
}
This is a naive way to approach this problem, but it will work for you. There are many other ways to solve this, but I think this is a good start for someone new to JS. This also may cause you some more bugs when you click a button that has already been clicked after clicking a different one, but I think you can solve that!
Related
I have a 'gallery' of images with a selection button below each. When I click on the button related to each image, I want the image opacity to change to 0.5. I'd rather do this without each image having an individual id. Warning: my jQuery knowledge is pretty average, I cant quite get my head around some of it!
<div>
Group 1<br>
<img src="http://www.example.com/myimage1.png" class="my-img" /><br>
<button class="mybutton">Click</button>
</div>
<br>
<div>
Group 2<br>
<img src="http://www.example.com/myimage2.png" class="my-img" /><br>
<button class="mybutton">Click</button>
</div>
So, with code like this, clicking any button will fade ALL images with that class, not just the related image
$('.mybutton').click(function(){
$('.my-img').css("opacity","0.5");
});
I thought about using something like .prev() but I don't think I have my head wrapped around it properly and am implementing wrong.
$('.mybutton').click(function(){
$(this).prev('.my-img').css("opacity","0.5");
});
Any thoughts on how to approach this?
https://jsfiddle.net/sanfly/gbkz566b/3/
The previous element to the button is a br. So in this case you have to go to the root that is the parent and find the child that is img and change it's opacity
$('.mybutton').click(function() {
$(this).parent().find('img.my-img').css("opacity", "0.5");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Group 1
<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
<br>
<button class="mybutton">
Click
</button>
</div>
<br>
<div>
Group 2
<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" />
<br>
<button class="mybutton">
Click
</button>
</div>
prev() only gets the immediately preceding sibling, and that is the <br> tag. Your selector is looking for an element with the class my-img. As the <br> tag does not have this class the query wouldn't return anything.
Since there's only one button and image per parent you could use siblings() instead.
$('.mybutton').click(function() {
$(this).siblings('.my-img').css("opacity", "0.5");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Group 1<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" /><br>
<button class="mybutton">
Click
</button>
</div>
<br>
<div>
Group 2<br>
<img src="http://i.stack.imgur.com/Hl3Y0.png" class="my-img" /><br>
<button class="mybutton">
Click
</button>
</div>
I'm making a web application. First see this image:
Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.
Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.
<header>
<div id="headerdiv">
<div class="headerlogo"><img src="#" alt="Passwords"></div>
<div class="quit"><img src="#" alt="Quit"></div>
</div>
</header>
<div id="functions">
<div id="funcLeft">
<div id="addbuttonwrap"><input class="addbutton" type="button" value=" + ADD"></div>
<div class="heading1">Your saved passwords</div>
<input class="funcbutton" type="button" value="EMAIL">
<input class="funcbutton" type="button" value="CAREER">
<input class="funcbutton" type="button" value="SOCIAL">
<input class="funcbutton" type="button" value="OTHER">
</div>
<div id="funcRight">
<div id="search">
<form name="searchform" method="post" action="">
<input type="text" name="searchinput" placeholder="Enter any keyword">
</form>
</div>
<div class="heading1 heading2">GUIDELINES</div>
<div class="slides">
<!--CONTENT-->
</div>
</div>
</div>
<footer>
<div id="footer">
Copyright: Protected
</div>
</footer>
NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.
You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.
var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
if(e.target != elementToHide){
elementToHide.style.display = "none";
}
}
This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.
The variable e contains the click event of which we check the target element in the if
Hope it helps
$(document).on("click", function(e) {
if(e.target.className != "search_element"){
$("#element_list").hide();
}
});
you can try this.
i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css
.search-with-submenu{
.submenu{
display: none;
}
input[type=search]:focus + .submenu{
display: block;
}
}
I have a div that contains 1 to many images with next and previous image buttons. When a user clicks the next/previous button the current image style is changed from display:block to display:none using jquery. I need to get the ID attribute from the current image that is showing ie. has the display:block style applied.
<div id="propPhotos" name="propPhotos">
<div id="propPhotsDivList">
<div id="imageNameId0" style="display:block">
<img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
</div>
<div id="imageNameId1" style="display:none">
<img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
</div>
<div id="imageNameId2" style="display:none">
<img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
</div>
<div id="imageNameId3" style="display:none">
<img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
</div>
</div>
<div>
<div class="row">
<input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick=" ImagePrev()" />
</div>
<div class="row">
<button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
</div>
</div>
This is the path I am currently on which is in the next and previous image click handlers.
CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');
So when the user clicks either button its supposed to assign the id value to the CurrentImageId. This does not work for one and does not help on the initial load when neither next or previous image buttons have been clicked.
Well, there are a few different ways as far as the initial load is concerned. Here are a couple of examples:
Using the :visible selector:
var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');
Or perhaps combined with filter():
var currentImageId = $('#propPhotsDivList img').filter(function(){
return $(this).parent('div').is(':visible');
}).prop('id');
If the divs are hidden and shown correclty using your click handlers, you can use the same functionality inside them as well.
$('#propPhotsDivList').children('div:not(:hidden)').attr('id');
Today I am building my self a vertical navigation menu and I'm wondering how I would go about build a particular feature I was thinking of.
Here is the coding behind my buttons:
html:
<div class="button"><a href="#">
<img src="../images/article.png" />
<p>Articles</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/leaderboards.png" />
<p>Leaderboards</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/events.png" />
<p>Events</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/search.png" />
<p>Search</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/other.png" />
<p>Other/Tools</p></a>
</div>
css:
.button{
border-left:10px solid #e5dad6;
padding-left:5px;
margin-bottom:20px;
width:120px;
height:120px;
text-align:center;
}
My Goal:
Now my goal is to change the image of the relevant buttons when a user hovers over the whole div (button div), now of course I can do this by adding a hover state in css, but that's not what I want to do, because I don't want to just change that particular div.
What I want:
I want it so I can basically say = if .button is being hovered over, then change the img src of something else on the page, NOT change something related to the element being hovered over.
Do something like this with jQuery:
$(document).ready(function() {
var oldSrc = $('.myNewImage').attr('src');
$('.button').hover(function() {
//on hover of your element
$('.myNewImage').attr('src','http://mynewimagesrc.com');
}, function() {
//when the cursor leaves your element
$('.myNewImage').attr('src', oldSrc);
});
});
You'll have to switch out the .myNewImage, class for the actual class of the image on your page but that should work for what you're asking. It also assigned the original source of your image so that you can always return the element back to it.
you may want to check .hover() for jQuery
You can do what you want really easy with jquery.
<div class="button" id="article_button"><a href="#">
<img src="../images/article.png"/>
<p>Articles</p></a>
</div>
$('.button').on('hover', function(){
$('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
$('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun