Here I have a code that I open in modal window:
contentStr += '<div>Lorem Ispum</div><button>Add to timeline</button></div>';
$(contentStr).dialog({
modal:true
});
Now I want when I click on button Add to timeline to add: '<div id="new">place.name</div>'
into div ID bottom but with margin left var "N"
How I can do that with jquery?
assuming you meant you have a var N somwhere you want to apply it to margin left:
$('button').click(function(){
$('#bottom').append($('<div id="new">place.name</div>').css('marginLeft',N+'px'));
});
Some word of advise, this jquery is really basic, next time do some research please and show here what you found and where you struggle.
http://api.jquery.com/css/
http://api.jquery.com/append/
<style>
.marginLeft {
margin-left: Npx;
}
</style>
<script>
$.('button').click(function(){
$('div#buttom').html( $('div#buttom').html+'<div class="marginLeft" id="new">place.name</div>');
});
<script>
Related
What I'm trying to accomplish is make a div visible when hovering over another using the .hover() method, addClass and removeClass. But what happens is that when I hover over the added div, it reads that I'm no longer hovering over the div specified (or at least that's what I assume) in the .hover() method. This causes the div to flash on and off the screen repeatedly. How can I fix this so this problem doesn't happen? Here is the code:
JS
$(document).ready(function(){
$('.building').hover(
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).addClass('active');
},
function(){
var my_id = $(this).attr('id');
var my_balloon ="#" + my_id + '_balloon';
//console.log(my_balloon);
$(my_balloon).removeClass('active');
}
);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function abc() {
document.getElementById("Div2").style.display="";
}
</script>
</head>
<body>
<div onmouseover="abc()">Div1</div>
<div id="Div2" style="display:none">Div2</div>
</body>
</html>
If the balloon overlaps the Div, it captures the event “onmouseover”.
If you don’t have to deal with it, you could use css rule to prevent any action
.balloon {
pointer-events: none;
}
This rule allows the event to pass through the balloon, as if it didn’t exist.
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
I have a page that can have a variable number of <div> the idea is people can click the + symbol which is an <img> then the div that is linked to the img tag will display.
I currently have:
PHP/HTML
$plus = '<img src="images/plus.png" class="clickme" width="20px" height="20px">';
$table .= '<div>'.$plus.'</div>';
$hidden .= '<div class"diary">-Content-</div>';
JS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$( ".clickme" ).click(function() {
$( ".diary" ).slideToggle( "slow", function() {
});
});
});
</script>
This obviously opens all divs and not just the one that is clicked on. I have looked at other similar questions on here and have tried a number of variations such as:
$(document).ready(function(){
$(".clickme").click(function(){
$(this).next(".diary").toggle();
});
});
However, when I try these it just stops working altogether. i.e. none of the divs slide up or down. I see the examples work on JS Fiddle but as soon as i apply it to my page I get nothing.
I am possibly doing something really dumb for it not to work but can't see what.
thanks for any help.
The HTML output should look like
<div>
<div>
<table>
<img class="clickme">
</table>
</div>
<div class="diary">
<table> content </table>
</div>
<div>
(based on tht HTML provided)
Best way would be to add an attribute with matching indexes to both elements
<div>test toggle
<div class="clickme" data-index="1">click me</div>
<div class="toggle" id="obj_1">toggled field</div>
</div>
and then in the JQuery:
$(function () {
$(".clickme").click(function () {
//get number from clicked element's attribute
var index =$(this).attr('data-index');
//select element with id that matches index and toggle
$('#obj_'+index).toggle();
});
})
After looking at your code, i can see that the slideToggle call is maded on .diary class which is probably applied on each of your elements.
I suggest you to put your diary div inside the $plus div then use jquery children or simply give your .diary divs a unique id and use the id attribute for your
toggle.
EDIT:
Here is a simple html output:
<div class="clickme">
<div class="diary">CONTENT HERE</div>
</div>
Add this in the CSS:
.clickme {
background: url('images/plus.png') no-repeat top left;
min-width: 20px;
min-height: 20px;
cursor: pointer;
}
Script tag:
<script>
$(function() {
$(".clickme").click(function() {
$(this).children().slideToggle("slow");
});
});
</script>
Note that i'd let the diary class for your usage and styling purpose but it's not used anywhere.
I have the following script in my page to close out a dropdown submenu when the close button is clicked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".closebutton").click(function() {
clearTimeout();
var c = $(this).closest("li");
c.find(".dropdown").css("left", "-9999px")
});
});
</script>
Once the "close button" is pressed, the dropdown no longer appears again when I hover over the parent li since the css has been changed to "left: -9999px". What script should I add that returns the css to "left: 0px;" again when I hover once more on the parent li without reloading the page?
Thanks!
This finds the closest li to the close button, and when its hovered finds the .dropdown element and sets the .dropdown to left: 0.
$('.closebutton').closest('li').hover(function() {
$(this).find('.dropdown').css('left', '0px');
});
You could use the $.mouseover() event and change the left property back to 0px. It would look something like this:
'<script type="text/javascript">
$(function() {
$(".closebutton").mouseover(function() {
var d = $(this).closest("li");
d.find(".dropdown").css("left", "0px");
});
});
</script>'
Hope that helps!
Try using the .show() and .hide() events in jQuery rather than changing the css and the .hover() to execute the .show().
c.find(".dropdown").hide();
this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(
Check the syntax for .attr. It should be something like
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/
To change the value of src you use 'attr' like this:
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
.display-none {
display:none;
}
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});
take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change..
here is simillar example i'm working on. hope will help you.!
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});
You should use css to associate image(s) on your "button" and a css class to determine which to show.
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
markup
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});