We Keep Coding

Changing text on a button multiple times and moving a div with JQuery

I currently have a box-shaped div (id = "container") that is located at the center of the page. Inside that div I have a button that says "clickMe". What I want is that when I click that button, the div moves to the left side of the screen and the text on the button text changes to "Collapse", and when I click it again (collapse button) the div returns back to the center of the screen and the button text changes to "Extend".
For that I have the following three files:
index.php
menu.php
move.js
menu.php
//...........................
<button id="mover" type="button" >ClickMe</button>
<script type="text/javascript" src="js/move.js"></script>
//........................
move.js
var collapsed = true; //flag
//jQuery button listener
$("#mover").click(function() {
if (collapsed) {
console.log("phase1");
//Moves div to the left of the page
$("#container").animate({
right: '25%'
}, "slow");
//Change the text on the button to "Collapse" (doesn't work)
document.getElementById("mover").innnerHTML = "Collapse";
collapsed = false;
} else {
console.log("phase2");
//Returns the div to the center of the page
$("#container").animate({
left: '0%'
}, "slow");
//Change the text on the button to "Extend" (doesn't work)
document.getElementById("mover").innnerHTML = "Extend";
collapsed = true;
}
});
index.php
<div class="bottom">
<?php include ("menu.php"); ?>
</div>
What happens is that when the button is clicked once, the div moves to the left and then to the center. The text on the button is still "ClickMe" (doesn't change) and the div won't move at all if I clicked the button once more.
This is what prints on the console when I click the button the first time:
VM1608 move.js:7 phase1
VM1612 move.js:14 phase2
VM1616 move.js:7 phase1
VM1620 move.js:14 phase2
VM1624 move.js:7 phase1
VM1628 move.js:14 phase2
move.js:7 phase1
(when I click the button again it prints the same 9 outputs but the div won't move)
Just to recap I have got 3 issues with my code: changing the text on the button, move the div to the left when the button is clicked and to the center when it is clicked again and I want to be able to do this more than once.
PS: I tried to use delay in the first if statement but I got the same result.

I don't see any problem doing what you seem to be trying to do.
This also makes use of the complete callback in jQuery animate to change the button text.
var collapsed = false;
$('#mover').on('click', function() {
if (collapsed) {
$("#move-me").animate({
left: 0
}, "slow", function() {
$('#mover').html('Original text');
});
collapsed = false;
} else {
$("#move-me").animate({
left: '25%'
}, "slow", function() {
$('#mover').html('Changed text');
});
collapsed = true;
}
});
#move-me {
height: 200px;
width: 200px;
left: 0;
background-color: grey;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mover">
Original text
</button>
<div id="move-me">
</div>

close button for jquery popup box

I am using this code for popup box and it's work well
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my HTML code:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
</div>
<div id="fade"></div>
but my popup box close only when click outside popup box but i want add a close button in my box and when click it close my box. how can do it?

Try this..
HTML:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
<div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>
Javascript:
$('.closepopup').on('click', function(e) {
$('.popupbox').fadeOut();
$('.fade').fadeOut();
});

Looking for "show more" "hide" javascript/jquery

I have been searching all day on google for this, basically I have a field that can have anywhere from 50 to 500 characters, so I am looking for a script that allows me to display 200 at a time(as example) with a read more link to expand the rest of the content, so far the closest I have found is this(see code below) but that requires manually separating the content up which is not really possible..
<p>...This is all visible content...
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>...This content is hidden by default...</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
Where I need something like..
<div class="hidden"><?php $rows['content']; ?></div>
Even if there was a non script PHP way to do this I would be happy.

Html
<div class="box">
<p id="id_full_text" class="class_full_text">
Full Text
<p>
Show more
<p id="id_hide_text" class="class_hide_text">
Hide Text
<p>
Hide more
</div>
css
.class_hide_text, .class_link_hide {display: none;}
Jquery (in you have just 1 in the same page)
$('#id_link_show_more').click(function () {
$('#id_full_text').hide(); // hide fullText p
$('#id_link_show_more').hide(); //hide show button
$('#id_hide_text').show('100'); // Show HideText p
$('#id_link_hide').show('100'); // show link hide
});
$('#id_link_hide').click(function () {
$('#id_link_hide').hide(); // hide link hide
$('#id_hide_text').hide(); // hide the hide Text
$('#id_link_show_more').show('100'); //show ths show button
$('#id_full_text').show('100'); // show fullText
});
Jquery (if you have more than 1 in the same page, because you don't want open all the hide divs in the page)
$('.class_link_show_more').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_full_text').hide(); // hide fullText p
the_parent.children('.class_link_show_more').hide(); //hide button
the_parent.children('.class_link_hide').show('100'); // Show HideText p
the_parent.children('.class_hide_text').show('100'); // Show HideText p
});
$('.class_link_hide').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_link_hide').hide(); // hide link hide
the_parent.children('.class_hide_text').hide(); // hide hide text p
the_parent.children('.class_link_show_more').show('100'); //Show link show
the_parent.children('.class_full_text').show('100;); // show full text
});
Note: the number into the show(x) is the time (millisecond) to show the div

How to catch any click event in jquery [duplicate]

This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.

You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});

At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.

updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});

<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")

<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/

Many toggle-slide elements in one page

I use this script multiple times to hide some text:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
I want to make it impossible to toggle two hidden divs at once.
Example:
Click on one button (#button1) = the hidden div (#div1) associated to that button shows.
Click another button (#button2) = The div (#div2) associated to that button shows and at the same time #div1 closes (slide to close).
Click another button (#button3) = The div (#div3) associated to that button shows and at the same time #div2 closes (slide to close).

Add a class .button to all of the buttons and .div to all divs. Then it's just a matter of:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
http://jsfiddle.net/6Lhxm/

Could also hide all the divs on click and then show only the associated one:
javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
html:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>
http://jsfiddle.net/x7Ehq/