In my html code there are list items. I want to show and hide related fav div when hover the related list item. But i can not relate fav div and it's list item.
html:
<ul>
<php? for(....): ?>
<li>
<div id="sin">
some stuff
</div>
<div id="son">
some stuff
</div>
<div id="fav">
something
</div>
<br />
</li>
<php? endfor; ?>
</ul>
when mouse over <li> tags "fav" div which belongs to mouse overed list item has to appear.
My unworked jquery code:
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
The problem is that you are using same id multiple times. You need to use class="fav" instead of id="fav"
//for #sin and #son also
$(document).ready(function()
{
$("li").hover(function(){
$("#fav").show()},
function () {
$("#fav").hide()
});
});
should be
$(document).ready(function()
{
$("li").hover(function(){
$(this).find(".fav").show()},
function () {
$(this).find(".fav").hide()
});
});
here you have
$(document).ready(function()
{
$('.fav').hide();
$("li").hover(function(){
$(".fav",$(this)).show()},
function () {
$(".fav",$(this)).hide()
});
});
you need to use the context with $(".fav",$(this)). instead of $(".fav")..
Also you've to change from id to class like
<li>
<div class="sin">
some stuff
</div>
<div class="son">
some stuff
</div>
<div class="fav">
something
</div>
<br />
</li>
Related
Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?
I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.
I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
Here is my fiddle
Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
Example : https://jsfiddle.net/yvsu6qfw/3/
It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:
HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
you can use html function, without parameter gets the content of the element
with parameter replaces the content with the string parameter
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
In your code example, you do for example:
$('#info').prepend('#option1');
What you instruct to do here, is adding a text string '#option1' to an element with ID info.
What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:
$('#info').prepend($('#option1').html());
Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:
$('#option1,#option2').hide();
$('#option3').hide();
And yet another one: use data-attributes on your buttons:
Button 1
Button 2
<div id="info">
</div>
And the JS:
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.
Using number from ID
Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:
jsFiddle demo
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
Target element using data-* attribute
Alternatively you can store inside a data-* attribute the desired target selector ID:
<button data-content="#option1" id="button1">Button 1</button>
and than simply:
jsFiddle demo
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
http://api.jquery.com/html/
http://api.jquery.com/text/
If the expectation is to get same indexed hidden div content, Then the below code should work.
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});
I have two containers in top and bottom,
Top container initially it will have no records i'm adding list of text from bottom container to top container on button click as of now its working fine,
but one small change in my scenario currently now multiple records are adding to my top container i want only once no multiple/same list record should appear in top container
say for example if i have one record placed above in top container next time even if i click add button same list record should not be added into top container either button should be disabled after adding list record or no duplicate record should be allowed in top container
somebody help me out in achieving it Thanks!
https://jsfiddle.net/qx69o1bd/
html
<div>
<ol id="sortable">
</ol>
</div>
<br/>
<div>
<ul id="draggable">
<li>
<div class="qitem">
<label class='lbl'>
Lance
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Adam
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
<li >
<div class="qitem" >
<label>
Rickey
</label>
<button class="hello" >Add To Top container</button>
</div>
</li>
</ul>
</div>
JQuery
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
});
only add a class to disable and validate it. With css also you can stylling the button. https://jsfiddle.net/mig1098/qx69o1bd/4/
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if(!$(this).hasClass('disabledbutton')){
$("#sortable").append('<li>'+label+'</li>');
}
$(this).addClass('disabledbutton');
});
});
$(document).ready(function() {
$("#sortable").sortable();
$("button").click(function () {
var label = $(this).prev().text();
if ($("#sortable > li:contains("+label+")").length != 0)
return;
$("#sortable").append('<li>'+label+'</li>');
});
});
This checks if there is already an element which contains the name, and if so doesn't let the user add it again!
If you use the one method to attach your listener to the click event, the button will only run your listener once (per button the selector applies to):
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
});
If you wish to actually disable your button, you can do this by setting the disabled attribute on the object:
$("button").one('click', function () {
var label = $(this).prev().text();
$("#sortable").append('<li>'+label+'</li>');
$(this).attr('disabled', true');
});
I have a menu with headings. When a heading is clicked, the child menu items will open. I would like to show only the menu that has most recently been clicked. If heading_practice is clicked, and other menus are open, they will slideToggle close. How can I do this?
<div id="pageHeadings">
<div id="heading_practice">
<a href="#">
<p>Practice Areas</p>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
<div id="heading_about">
<a href="#">
<p>About</p>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
if(!$(this).find('[class^=menu]').is(":visible")) {
$(this).find('[class^=menu]').slideToggle("fast");
}
//if element is clicked, hide all other menus
});
Fiddle
You probably want to perform a slideUp on all the other elements. This can be achieved like so:
$("#pageHeadings div[id^=heading]").click(function () {
var $menu = $(this).find('[class^=menu]');
if ( ! $menu.is(":visible") ) {
$menu.slideToggle("fast");
}
$('[class^=menu]').not($menu).slideUp("fast");
});
Just add this line:
$('[class^=menu]').hide('fadeIn');
Like this:
$(document).ready(function () {
//hide all dropdown menus
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
// $(this).find('[class^=menu]').hide();
if (!$(this).find('[class^=menu]').is(":visible")) {
$('[class^=menu]').hide('fadeIn');
$(this).find('[class^=menu]').slideToggle("fast");
}
});
});
That will hide all others before toggling the current one.
Demo
One new line in your click function is all you need (and you can lose the if check):
$("#pageHeadings div[id^=heading]").click(function () {
$("#pageHeadings div[id^=heading]").not($(this)).find('[class^=menu]').slideUp();
$(this).find('[class^=menu]').slideToggle("fast");
});
jsFiddle example
i got problem with firing event when one of the tab click... i am using jQuery Easy Tab plugin.... all i want is to display alert when tab with id "#sp_tab2" is clicked... at the movement it fires with all tab and if do like this $("#sp_tab2").click(function(){..}
it doesn't work either... http://os.alfajango.com/easytabs/#advanced-demo
many thanks in advance ...
<div id="selectPropertyTab" class="tab-container">
<ul class="etabs">
<li class="tab tab_description"><img id="tab_description_icon" src="../Icons/property_info_G.png"/>Description</li>
<li class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
<li class="tab tab_area_kn"><img id="tab_area_kn_icon" src="../Icons/property_direction_icon_G.png" />Area Knowledge</li>
</ul>
<div id="tab_data">
<div id="sp_tab1">
display the property details
</div>
<div id="sp_tab2">
<div id="map_canvas" style="width:61.4em; height:400px;"></div>
</div>
<div id="sp_tab3">
display property area knowledge
</div>
</div> <!--end tab_data-->
</div> <!--end selectPropertyTab-->
jQuery....
$(function () {
$("#selectPropertyTab").easytabs();
});
$("#selectPropertyTab").bind('easytabs:after', function () {
alert("tab no 2 is clicked......");
});
$(function () {
$("#selectPropertyTab").easytabs();
});
$(".tab_map").on("click",function () {
alert("tab no 2 is clicked......");
});
I Hope this will work ! Check this Fiddle
you can have conflict issue if you using .tab_map class somewhere. add id to your li tag
html
<li id="map_canvas_tab" class="tab tab_map"><img id="tab_map_icon" src="../Icons/property_map_icon_G.png" />Map</li>
jquery
$("#map_canvas_tab").on("click", function () {
alert("tab no 2 is clicked....");
});