jquery menu slide and change button text - javascript

ok so im using the slide menu from here slide menu and i want to change the button text when its clicked to say show or hide for example,this is the code i have for only top menu so far on my offline install
<button id="showTop" class="menubtn" data-text-swap="Show">Show</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/classie.js"></script>
<script>
var menuTop = document.getElementById( 'cbp-spmenu-s3' ),
showTop = document.getElementById( 'showTop' ),
body = document.body;
showTop.onclick = function() {
classie.toggle( this, 'active1' );
classie.toggle( menuTop, 'cbp-spmenu-open' );
disableOther( 'showTop' );
};
function disableOther( button ) {
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
}
</script>
I tried something mentioned in another post
$('.SeeMore2').click(function(){
var $this = $(this);
$this.toggleClass('SeeMore2');
if($this.hasClass('SeeMore2')){
$this.text('See More');
} else {
$this.text('See Less');
}
});
but that didnt help so is there something i can do to the first script under the showTop.onclick function to also change button text and not just class.


You're missing this from within your click function:
showTop.onclick = function() {
if (showTop.innerHTML == 'Show') {
showTop.innerHTML = 'Hide';
} else {
showTop.innerHTML = 'Show';
};

Related

button continually only fire once

If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks
HTML
<div class="wrap">
Click1
Click2
</div>
Script
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
clicked = true;
if(clicked = true){
console.log($this.text());
clicked = false;
}
});

I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :
$('.wrap a').on('click', function(){
console.log($(this).text());
$(this).unbind('click');
});
See this fiddle
Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :
var onclick = function(){
var $el = $(this);
console.log($el.text());
$('.wrap a').off('click', onclick);
$('.wrap a').each(function(id, link){
if($el.text() != $(link).text())
$(link).on('click', onclick);
});
}
$('.wrap a').on('click', onclick);
Fiddle again

See the following code
var clicked1 = false;
var clicked2 = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
var clickOrigin = $(this).text();
if(clickOrigin == 'Click1' && clicked1==false){
console.log("Click 1 clicked");
clicked1 = true;
}
if(clickOrigin == 'Click2' && clicked2==false){
console.log("Click 2 clicked");
clicked2 = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
Also you can find the jsFiddle.

You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-
var clicked1 = 0;
var clicked2 = 0;
$('.wrap').on('click', 'a', function() {
var $this = $(this);
var $text = $(this).text();
//Click2
if ($text == 'Click1') {
clicked1 += 1;
if (clicked1 == 1) {
console.log($text);
} else {
return;
}
}
//Click2
if ($text == 'Click2') {
clicked2 += 1;
if (clicked2 == 1) {
console.log($text);
} else {
return;
}
}
});
Full Demo

To disable both buttons after first click, try:
var clicked = false;
$('.wrap').on('click', 'a', function(){
let $this = $(this);
if( !clicked ){
console.log($this.text());
clicked = true;
};
});
To disable each button after first click, try:
$('.wrap a').each(function() {
let $this = $(this);
$this.disabled = false;
$this.on('click', function() {
if ( !$this.disabled ) {
console.log($this.text());
$this.disabled = true;
};
});
});

Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if(clicked == false){
console.log($this.text());
clicked = true;
}
});

try this ,much simpler and this will be more useful if you have multiple click buttons
if you had implemented some other way ,this will worth a try
<div class="wrap">
Click1
Click2
</div>
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if($this.attr("data-value") == ""){
console.log($this.text());
$this.attr("data-value","clicked")
}
else{
console.log("Already clicked")
}
});
Fiddle

Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well
$('.wrap').on('click', 'a', function(){
$(this).addClass("disableClick");
});
.disableClick{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>

I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
$(function () {
$('#click1').on("click", function (e) {
$('#click1').on("click", function (e){
e.preventDefault();
e.preventDefault();
});
});
I think its help you.

Just use $(".wrap").one('click', ....
Read the jquery API documentation.

JavaScript on input event

I have a form with CSS animations, when form field is selected labels animate out and when text is filled labels shouldn't animate back. And this works for input fields but not with textarea. Can't seem to find the problem, and I've been playing with it for some time now.
This is my JS code:
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll('input.input_field', 'input-textarea.input_field-textarea') ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
EDIT: This was the problem, code was going like this:
document.querySelectorAll('textarea.input_field-textarea', 'input.input_field'))
Instead of removing those 2 extra '':
document.querySelectorAll('textarea.input_field-textarea, input.input_field'))
Thanks to all for help!

Change the input-textarea.input_field-textarea selector to textarea.input_field-textarea. There's no such <input-textarea/> element:
[].slice.call(document.querySelectorAll('input.input_field', 'textarea.input_field-textarea')).forEach(function(inputEl) {
// ...
});

jQuery confliction with the menu

I'm working a site which is having a jQuery conflicting error. I tried few practices from the internet but I always failed. Please take a look at the script and teach me how I can solve this error.
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var container = document.getElementById( 'site-navigation' ),
button = container.getElementsByTagName( 'h1' )[0],
menu = container.getElementsByTagName( 'ul' )[0];
if ( undefined == button || undefined == menu )
return false;
button.onclick = function() {
if ( -1 == menu.className.indexOf( 'nav-menu' ) )
menu.className = 'nav-menu';
if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
}
};
// Hide menu toggle button if menu is empty.
if ( ! menu.childNodes.length )
button.style.display = 'none';
} )();
Thanks :)

You need to add "jQuery" on the end:
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
Taken from: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Try this.
$j = jQuery.noConflict();
Now use $j wherever jQuery is needed to be used.
e.g. use jQuery code j$(...) wherever jQuery is needed.

change text on link when div is open

I have a button on my page
<button id="show1" class="morelinkblack">Find Out More</button>
When clicked it runs this code
$("#show1").click(function(){
$(".hidden-div1").slideToggle("slow");
});
Is there a way of changing the text to say "Close" instead of "find out more" while the div is visible?

You can do:
$("#show1").click(function(){
var that = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).is(":visible")) {
that.text("Close");
} else {
that.text("Find out more");
}
});
});
Based on the comments, the div could be opened or closed depending on where the user is directed from. A simple check in the DOM ready can set the text accordingly:
$(".hidden-div1").is(":visible") ? $("#show1").text("Close") : $("#show1").text("Find out more");

Maybe this :
$("#show1").click(function () {
var $div = $(this);
$(".hidden-div1").slideToggle("slow").promise().done(function () {
$div.text(function () {
return $(this).is(":visible") ? "Close" : "Find Out More"
});
});
});

Updated code
$("#show1").click(function() {
var el = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).css('display') == 'none') { // <- Updated here to check if div is close or open
el.text('Find Out More');
} else {
el.text('Hide More');
}
});
});
Update button text on document ready / page load
$(document).ready(function() {
if ($(".hidden-div1").css('display') == 'none') {
$("#show1").text('Find Out More');
} else {
$("#show1").text('Hide More');
}
});

How to hide div by onclick using javascript?

I have used a javascript to show div by onclick but when i click outside div i want to hide the div. How to do it in javascript? i'm using javascript code..
<a href="javascript:;" onClick="toggle('one');">
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}

HTML
show/hide
Javascript
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}

you can use blur() function when you clicked somewhere else
$("#hidelink").click(function() {
$("#divtoHide").show();
});
$("#hidelink").blur(function() {
$("#divtoHide").hide();
});

Use jQuery and this will be as easy as:
$("button.hide").click(function(event){ $("div.hidethis").hide() });

Categories

Resources