Please help me to combine two scripts of jquery. AT the moment they are not compatible to each other. What can I do to make them both friendly.
Jquery:
<script>
function edit_product() {
var id = $('.DIVY.panel3').attr('id');
alert (id);
</script>
<script>
$(function(){
$('.DIVY').click(function(){
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
})
</script>
html:
<div id="1" class="DIVY panel2" >click me please!</div>
<div id="2" class="DIVY panel2" >click me please!</div>
<div id="3" class="DIVY panel3" >click me please!</div>
<div id="4" class="DIVY panel2" >click me please!</div>
<div >Check ID</div>
For better visualization, I put this code to My_jsfiddle
Thank you for your efforts!
Your code works on jsfiddle, just change the execution to No wrap - <in head> on the Frameworks & Extensions panel, see http://jsfiddle.net/IrvinDominin/CevcR/4/
But don't mix jQuery and inline js code if you can, you lose clarity in the code.
Assign an id to your anchor element like editMe and set its click function, your code can look like:
$(function () {
$('.DIVY').click(function () { // when a .myDiv is clicked
$('.DIVY.panel3').removeClass('panel3').addClass('panel2');
$(this).removeClass('panel2').addClass('panel3');
})
$('#editMe').click(function () { // when a .myDiv is clicked
var id = $('.DIVY.panel3').attr('id');
alert(id);
})
})
Demo: http://jsfiddle.net/IrvinDominin/CevcR/2/
Related
I have four <button>, Each one has a specific id (b1, b2, b3, b4) and when clicking on it, It would take me to a specific <div> that has an id (marina1, marina2, ecc...). Is there a way to not write four times this function (one function for one specific button)?
Like creating an universal one with two parameters as input (But I don't know how to pass those two parameters to the function)?
This is the code:
<script>
$(document).ready(function (){
$("#b1").click(function (){
$('html, body').animate({
scrollTop: $("#marina1").offset().top
}, 2000);
});
});
</script>
To achieve this you can first use common classes on the buttons and divs to group them. Then you can use data attributes to store the relative information on the button elements which you can read in the click handler to toggle() the relevant div. Try this:
$('.btn').click(function() {
$($(this).data('target')).toggle();
});
.marina {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="b1" data-target="#marina1">Marina 1</button>
<button class="btn" id="b2" data-target="#marina2">Marina 2</button>
<button class="btn" id="b3" data-target="#marina3">Marina 3</button>
<div class="marina" id="marina1">Marina 1 details...</div>
<div class="marina" id="marina2">Marina 2 details...</div>
<div class="marina" id="marina3">Marina 3 details...</div>
FYI this technique is known as 'Don't Repeat Yourself', or DRY.
Yes there a another you can do it. You can add a common class to all the id elements. Just give it a try .
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.click {
cursor: pointer
}
</style>
</head>
<body>
<span class="click" id="1">1</span><br>
<span class="click" id="2">2</span><br>
<span class="click" id="3">3</span><br>
<span class="click" id="4">4</span>
<script>
$(document).ready(function() {
$(".click").on('click', function() {
var id = this.id;
alert(id);
// code to be executed
});
});
</script>
</body>
</html>
I have a series of divs all of the same class with no IDs. I want to change the background of the div when it is clicked. I tested the function and it works fine. But when I access the element as this, it is not working. Question is how to get buttonpressed() to work only for the div clicked on?
HTML
<div id="navbar">
<div class="navitem" onclick="buttonpressed()"><p>Membership</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Certification</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Foundation</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Seminars</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Councils</p></div>
</div>
Javascript
function buttonpressed() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
}
Since you're using jQuery you can (and should) remove the inline event handling and just use:
$( document ).ready(function() {
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
});
jsFiddle example
When using HTML inline event handlers, this references your window. If you instead attach an event handler through JavaScript, it will work as expected:
$(".navitem").on("click", function () {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<div class="navitem"><p>Membership</p></div>
<div class="navitem"><p>Certification</p></div>
<div class="navitem"><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem"><p>Councils</p></div>
</div>
You could get access to this if you change how you're catching the event:
$('.navitem').on('click', function() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
HTML
<div id="navbar">
<div class="navitem" ><p>Membership</p></div>
<div class="navitem" ><p>Certification</p></div>
<div class="navitem" ><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem" ><p>Councils</p></div>
</div>
As mentioned in the comments, one way to do this would be:
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
Check: https://api.jquery.com/click/
Also keep in mind, that the code above will bind this function to all elements with the css-class "navitem". In case you do not know, what this means you might check as well: https://api.jquery.com/category/selectors/
$(".navitem").click(function(){
$(this).css('background-image', 'url(https://www.google.pt/images/nav_logo195.png)');
});
Demo:
http://codepen.io/tuga/pen/bdddGa
If you happened to want a pure JS solution and if you want to keep your inline onClick listeners, you could do this..
HTML
<div class="navitem" onclick="buttonpressed(this)"><p>Membership</p></div>
JS
function buttonpressed(element) {
var bgString = "url('navbuttonpressed.png')";
element.style.backgroundImage = bgString;
}
The this keyword passes the element that called the function through to the method itself.
This works well - JSFiddle
I'm having troubles creating an exit button for the following script.
I'm using popup.js from http://docs.toddish.co.uk/popup/.
It sais that in order to do it we should use popup.close() from inside the object. But there are no examples and I can't get it to work. Does anyone have an idea?
JSFiddle link = http://jsfiddle.net/andrewallen817/bedhhu1o/3/
Html:
<a href=#txt class="popup" >Click here</a>
<div id="txt" style="display:none">
<h1>This is a title</h1>
<p>this is some text</p>
<button>close</button>
</div>
JS
$(function(){
$('.popup').popup();
});
I fixed it for you by looking at the doc. JSfiddle
$(function () {
$('.popup').popup({
afterOpen: function () {
var popup = this;
$('button').click(function () {
popup.close();
});
}
});
});
You might want to specify which button you want to give the popup.close() or else every button will have it.
lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?
How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);
You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.
Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">
I am using the javascript function for multiple hide show divs in custom tumblr theme.. my The problem is as the class name is same, if i click on a single div, by default all the div gets show or hide.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(".toparea3").slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>
<div class="toparea3" style="display:none;">
<div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
<div class="share-bar-buttons">
<div class="share-bar-facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&layout=button_count&show_faces=false&width=110&action=like&font=lucida+grande&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
<div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="{Permalink}"
{block:Twitter}data-via="{TwitterUsername}"{/block:Twitter}
data-related="stylehatch:Premium Tumblr Themes by #newezra"></a>
</div>
<div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
<div class="linktumb">
http://www.tumblr.com/xdrs2sf
</div>
</div>
</div>
</div>
Assuming you have multiple "toggleme" buttons, if they're all in the format where you have a toggleme button and then a toparea3, you could do something like this:
$('.toggleme').click(function(){
$(this).next().slideToggle('slow');
return false;
});
The "next" function gets the next element in the DOM, which is the element you want to expand.
Edit: (nevermind the .children)
try using the .closest selector, or the .next selector someone else suggested. Just remember to provide the selector .toparea3 to make sure that only that class opens, not just any closest/next element.
$(document).ready(function() {
$(".toggleme").click(function () {
$(this).closest(".toparea3").slideToggle("slow");
return false;
});
});
I would recommend the following:
Place the 'a' and the corresponding 'div' in a parent 'div'. Something like this:
<div>
<a class='toggleMe' />
<div class='toparea3 />
</div>
Then you can update your inner selector to be:
$('.toggleMe').click(function(evt){
evt.preventDefault();
var parent = $(this).closest('div');
$(".toparea3", parent).slideToggle("slow");
}
My Recommendation is to give the div an id, and make the anchor element's href point to it:
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(this.hash).slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>
<div id="toparea3_1" class="toparea3" style="display:none;"></div>
This since the hash is given in the form #toparea3_1 that is a valid jQuery selector that selects on ID, and can be used directly.