I have created the following effects on the images seen here.
You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.
What jQuery or javascript code do I need to do this?
p.s. How do I properly post the code I have now. I tried to paste code in "enter code here," but received errors
This is fairly simple if you add rel="img-id" to each link you want to hide or show as follows:
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#">sunimg</a>
<a id="plane" href="#">planeimg</a>
<a id="nano" href="#">nanoimg</a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: Sun
2nd: Airplane
3rd: Nano
</div>
</div>
And then update your ready function jQuery as follows:
// target each link in the navigation div
$('#navigation a').click(function(e) {
// link that you clicked
clicked = $(this).attr('id');
// this is faster than the .each() you used
$('#navigation a').removeClass('active');
$(this).addClass('active');
// hide all links, then show the one with the same rel as the id clicked
$('#popuptext a').hide();
$('#popuptext a[rel='+clicked+']').show();
// prevent the default link action
return false;
});
Related
I new in Javascript. I'm working on my Django project and I want to add some buttons like img button. Here is example:
So when user will click img button in textarea will be added this text :
<img src="[YOUR IMAGE]">
Thanks for help.
If i understand your question correctly you have to call a function in javascript to write to your specified element and on your image you use a onclick.
something like:
onclick="document.location=this.id+'.html'
Sample:
$(function(){
var $display = $('#display');
$display.val(0);
$(document).on('click', 'button.number', function(){
if($display.val() != 0) {
$display.val($display.val() + $(this).val());
} else {
$display.val($(this).val());
}
});
});
JS Fiddle Link: http://jsfiddle.net/qohdjovu/
This was probably already answered here: Using jQuery to click the button and display the value of the button
Script function was made by: #R. Canser Yanbakan
You need more than an image if you're not aware of it already. I suggest using Glyphicons for that purpose, will simplify everything and will be more lightweight.
Say we use the fontawesome glyphs.
Create a bar above text area where you'll hold your controls,
<section>
<i id="control-bold" class="fa fa-bold" aria-hidden="true"></i>
<i id="control-italic" class="fa fa-italic" aria-hidden="true"></i>
</section>
<textarea id="textarea"></textarea>
For simplicity I used ids on the button control elements, and will use JQuery to listen to click events to make it even more simple.
$("#control-bold").click(function(){
// Bold was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
$("#control-italic").click(function(){
// Italic was clicked append {bold} to text area with whatever..
$("#textarea").append("{bold}");
});
Note this is a simple & basic example to get you started. Glyphicons and JQuery are only my suggestion for this question.
If you are looking for a way to change your button style, I will suggest you to use CSS instead of <img> HTML tag.
a CSS class/id for unselected button with the default background-image
a CSS class/id which override background-image or selected buttons
And you will add/remove classes using javascript element.classList.add('.selected') or element.classList.remove('.selected')
Please take a look here at what I'm trying to achieve: http://jsfiddle.net/3m6r7ud2/4/
I have the following html page that looks like this:
<div class="page_conatiner" id="page1">
<img src=$file1>
<div class="page_conatiner" id="page2">
<img src=$file2>
<div class="page_conatiner" id="page3">
<img src=$file3>
And so on.
I also have a fixed button that shows up on hover:
<div class="rotate_button" id="rotate_left" ></div>
<div class="rotate_button" id="rotate_right" ></div>
This is the jQuery I'm using:
$(document).on("click", ".rotate_button", function(){
var direction = $(this).attr("id");
var page_num = ?
rotate_file(page_num,direction)
})
The buttons are in fixed locations on the page, and show on hover. When clicking on this button, I want to get which div was behind that div while clicking
so I could know which of the pages I need to rotate.
How can I do this?
First, I'm not certain what animation you are going for, but there might be a jQuery widget that will do what you want out of the box. Idk. The bootstrap one is handy, but maybe all of bootstrap is more than you want: http://getbootstrap.com/javascript/#carousel.
To answer your question: I would set a variable somewhere that keeps track of the current page num. Set it to 0 (or 1 if that's the first page number) when the page loads, and then in your click handler, increment it by 1. And then make sure to reset it to 0 (or 1) again when it gets high enough to start over. Does that answer your question?
I'm sure this is fairly simple using jquery, but I cannot figure it out. I have a site with logo that is present when the site loads. I want to swap that logo with a different logo when the user hovers over a certain navigation link.
When hovering over the "com" link, I want to swap the site logo for a different one.
Can someone tell me how to accomplish this with jquery.
<div>
<div id="logo"><img src="myimage.png"></div>
<div id="menu">
<ul>
<li>res</li>
<li>com</li>
</ul>
</div>
</div>
Yes you can do it with jQuery using attr
Give res a class. The hover name should be myimage-hover.png
$(function () {
$('a.res').hover( function () {
$(.logo img).attr('src', $(.logo img).attr('src').replace(/\.png/, '-hover.png') );
});
});
It might also be worth your time checking into sprites.
This would be one way:
$('a:contains("com")').mouseover(function(){
$('#logo img').prop('src','http://www.placekitten.com/100/100')
});
jsFiddle example
I have the following html:
<div class="profileRowHeader"><!-- div 1 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-arrow-close"></i>
</div>
</div>
<div class="profileRowHeader"><!-- div 2 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-folder-open"></i>
</div>
</div>
<div class="profileRowHeader"><!-- div 3 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-folder-close"></i>
</div>
</div>
When I click element with class .profileRowHeader, it does some stuff and changes the icon folder from closed to open. As in middle div above.
$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
Works great. Now, if I click on div 3 above, div 2 still has icon folder-open, so to combat this i close all the folder icons whenever any profileHeaderRow is clicked.
$(".folderIcon").removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
Problem of course is that i'm using toggleClass, so the icon within the div i'm clicking will go to closed, then will toggle itself open again.
So, can I somehow find the class folderIcon within the div I clicked and not apply the class change to it. Hope that makes sense.
This is what I'm trying but simply does not work:
$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').removeClass('greenDragBg').addClass('glyphicon-folder-close');
Full code as it is:
$('.profileRowHeader').click(function() {
$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
});
Summary: I have x number of divs with class profileRowHeader within each of them is a folder icon, all closed... when I click any of the divs with class profileRowHeader I want that icon to become open, the rest are closed. When I click that div again, it changes to closed icon. However, if it is left open and another div is clicked it should close the open one, and the new folder icon within the new profileRowHeader becomes open.
Hope that's a bit clearer
This is how you can find elements inside the clicked element:
$(".folderIcon").not( $(this).find(".folderIcon") ) //...
Or a slightly shorter version setting a context for the selector:
$(".folderIcon").not( $(".folderIcon", this) ) //...
$('.profileRowHeader').click(function () {
// reset state of all icons back to closed
$('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
$('.glyphicon').find(':first').toggleClass('glyphicon-folder-close glyphicon-folder-open');
});
The title of my question needs more explanation...
I'm building a site for a rugs company. Last week I placed a question to make an accordion menu place an image in a different div
Image presentation using an accordion menu
but now, I was required to append more info to the images.
So... I have a menu like this:
<ul class="leve1">
<li>
<div class="some">
image1
image2
image3
...
</div>
</li>
...
</ul>
Update
New day, new thinking...
my menu has changed a bit and my question changed also...
I need to add to the site a div with the specs of each rugtype, but only to be displayed when you click on a link.
I place the rug image in a div next to the menu using:
$("div.some a").click(function (event) {
event.preventDefault();
$("div#dest").html($("<img>").attr("src", this.href).fadeIn(1000));
});
Is there any way for me to get the rugtype info from the href above?
Try adding the img element using html method. After it, find it using the find method and apply and fadeIn effect, for sample:
$("div.some a").click(function (event) {
//prevent default
event.preventDefault();
// get the href property
var href = $(this).prop('href');
// find the div and add a img with display:none, locate the img and fadeIn
$("div#dest").html("<img src='" + href + "' style='display:none;' />")
.find('img')
.fadeIn(1000));
});