Develop Reference

why remove class not working in javascript?

I have tried this before and it worked well but here i dont know...
<div onclick="choose(this)">
<div class="choose">
<button><a>click</a></button>
</div>
</div>
my JavaScript:
function choose(obj) {
obj = obj || document.activeElement;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
res_item.classList.remove("choosed_item");
}
});
}
choose and choosed_item have custom style
This is strange, but if i change remove to add and choose another class it works well !

The event is not updated because its child of onclick function. Thats why I integrated an interval. That will help to update the eventlistener:
function choose(obj) {
obj = obj || document.activeElement;
var interval;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
interval = setInterval(function () {
res_item.classList.remove("choosed_item");
stopInterval();
}, 0);
function stopInterval() {
clearInterval(interval);
}
}
});
}
Hope I could help!

My HTML button's javascript will not toggle second time

This is what I have so far:
HTML:
<button id="clockToggle" onclick="toggleClock()">Toggle Clock</button>
CSS:
#clockWidget {
display:none;
}
JavaScript:
function enableClock() {
var clock = document.getElementById("clockWidget");
clock.style.display="block";
}
function disableClock() {
var clock = document.getElementById("clockWidget");
clock.style.display="none";
}
function toggleClock() {
var clock = document.getElementById("clockWidget");
if(clock.style.display="none") {
enableClock();
}
else {
disableClock();
}
}
My goal is to make the button so that it will toggle the clockWidget on and off. If possible answer with JavaScript instead of jQuery.
P.S. If you vote my question down, at least comment on why you did so

In the if statement of your toggleClock() function you are missing a '=' and thus do not compare but instead set the display property of clock. This is why it only calls enableClock(). If you use the following it should work as expected:
if (clock.style.display == "none") {
enableClock();
} else {
disableClock();
}

You're missing another '=' in your comparison:
if(clock.style.display == "none") {
enableClock();
} else {
disableClock();
}

$("#clockToggle").click(function(){
$("#clockWidget").toggle();
});

Javascript: Toggle visibility of a div

I'm trying to make a div visible/invisible using java script. I have a function that is supposed to change the visibility to 'none' if the div is visible and to 'visible' if the div is none. However it doesn't seem to be working. Here is the code:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>

I Tried Your Code and Its Working For me. Please Find Below Code. Set Visibility for the Element initially Otherwise its not working at the beginning.
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
<div id="divTools" style="visibility:visible">
<p>Some Text</p>
</div>
<input type="button" onclick="toggleTools()" value="click" />

Go with
document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';

Try this way:
<script>
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.display!='none')
{
element.style.display='none';
}
else
{
element.style.display='block';
}
}
</script>
But you can use JQuery.
$('#divTools').toggle();

The last thing don't work it's the first time whom charge the page. I check if visibility == '' and this works.
function toggleTools()
{
var element = document.getElementById('divTools');
if(element.style.visibility=='visible' || element.style.visibility=='')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
live demo: http://jsfiddle.net/Magicianred/9vTeR/1/
Enjoy your code.

The code works, provided you set the visibility initially:
via CSS:
#divTools {
visibility:hidden;
}
jsFiddle example
Or via JavaScript:
document.getElementById('divTools').style.visibility='hidden';
jsFiddle example

Using $_GET with Jquery

I currently have the following code on my website:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
I would like to have an if(isset($_GET['email')); trigger this function as well, so have it open on page load if the $_GET variable is set.
I'm rather new with Jquery and not sure if this is possible, I also have another somewhat related question, I'm not sure if I should make a new question for this as I'm fairly new to stackoverflow as well, but here it is.
Say I have two of these:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
$(document).ready(function() {
$("#archivestop").on("click", function(e)
{
e.preventDefault();
$("#archives").toggle('fast');
});
});
I want one to close if the other one is opened, how would I go about this?
Thanks!

Here's the Javascript-solution:
function getParam(key) {
var paramsStr = window.location.search.substr(1, window.location.search.length),
paramsArr = paramsStr.split("&"),
items = [];
for (var i = 0; i < paramsArr.length; i++) {
items[paramsArr[i].split("=")[0]] = paramsArr[i].split("=")[1];
}
if (key != "" && key != undefined) {
// return single
if (items[key] != undefined) {
return items[key];
} else {
return null;
}
} else {
// return all (array)
return items;
}
};
if (getParam("email")) {
// ...
}

Regarding your second question you can use the following to determine if an element is visible:
var bool = $('.foo').is(":visible");
So to hide an element if it is visible you would do something like this:
if ($('.foo').is(":visible")) {
$('.foo').hide();
}

I'm silly and have answered my first question. I still have yet to have my coffee.
The following works, just insert it into the div that is to be displayed:
<div id="contactform" style="<?php if(isset($_POST['email'])) echo "display:block;" ?>">
content
</div>

Rubberband with iScroll and jQuery mobile

The headline says it all. At start of my app I retrieve data from a php file (some divs) and append them to an wrapper-div. Around this wrapper-div (not called wrapper) is the iScroll wrapper.
iScroll is working, but there is a rubberband effect.
Here's the (index) HTML:
<div data-role="header" data-theme="c" data-position="fixed">
<h1>Title</h1>
</div><!-- /header -->
<div id="wrapper">
<div id="scroller">
<div data-role="content" id="content">
<div id="headlinesindex">
<div class="span3" id="9999999999"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
onBodyLoad();
});
</script>
And here's the javascript-file:
function onBodyLoad()
{
$.ajax({
url: "headlines_getter.php?last="+ $(".span3:last").attr('id') ,
success: function(html) {
if(html){
$("#headlinesindex").append(html);
setTimeout(function () {
myScroll.refresh();
}, 0);
}
}
});
}
function onDeviceReady()
{
var myScroll = new iScroll('wrapper');
}
I've played arround with the setTimeout as it is explained at iscroll.com, but it changes nothing... Hope you know what's wrong.
Thanks in advance. Best regards, John.

I had the same issue.
It came from the outer "wrapper" not being sized correctly in iscroll.
If it is sized the same size as the inner "scroller" height then the iscroll will have no where to go and rubber band.
I fixed it for me, and created a fork for others with the same issue:
https://github.com/meckdahl/iscroll
================================== Advanced Usage
Here is some addon functions I use to maintain my 20+ scroll containers in our Spine.JS mobile app:
For each page I set a specific wrapper like such:
<div id="wrapper2">
Then I dynamically create iScroll only if that page is loaded:
After the content for the page is loaded I call like such:
window.resetScroll(2)
window.setScrolling(true)
This will re-initialize iScroll for this page.
Here are the functions I define on my root page:
<script type="text/javascript">
// maximum wrapper index = 23 currently (9/12/12)
var myScrolls = [];
myScrolls.length = 29; // Scrolls to look for wrapper1-30
var refreshScrolling = function() {
//console.log('refreshScrolling Active Scroll Items: ');
myScrolls.forEach( function(scrollItem){
scrollItem.refresh();
});
};
var refreshScroll = function(wrapperNumber) {
//console.log('refreshScroll wrapperNumber: wrapper' + wrapperNumber.toString());
var i = wrapperNumber;
setTimeout(function () {
(myScrolls[i-1]).refresh();
}, 100);
};
// This looks for and initializes and dynamic scrolls that Spine recently put in memory
// and have not been initialized yet.
var setScrolling = function() {
for (var i=1; i < myScrolls.length+1; i++){
if (($("#wrapper"+(i).toString()).length !== 0) ){
if((myScrolls[i-1] !== null) && (myScrolls[i-1] !== undefined)){
// Already setup
}
else{
myScrolls[i-1] = new iScroll('wrapper'+ (i).toString(),
{ hScroll: false, hScrollbar: false, vScrollbar: false });
created.");
}
}
}
}
// This must be called on a view with dynamic content to re-create the view to fit the potentially
// changing content size. It will only rebuild the one scroll whose index is passed in.
// The index should be the wrapper# for the view attached to the controller.
// Call setScrolling after this to catch any uninitialized views.
var resetScroll = function(wrapperNumber) {
var i = wrapperNumber;
// if (!(i in myScrolls)) continue; // skip nonexistent elements && !(myScrolls[i-1] )
if (($("#wrapper"+(i).toString()).length !== 0) ){
if( (myScrolls[i-1] !== null) && (myScrolls[i-1] !== undefined)){
// Destroy Skipped right now
myScrolls[i-1].destroy();
myScrolls[i-1] = null;
}
myScrolls[i-1] = new iScroll('wrapper'+ (i).toString(),
{ hScroll: false, hScrollbar: false, vScrollbar: false });
created.");
}
}
function loaded() {
setTimeout(function () {
setScrolling();
}, 100);
}
window.addEventListener('load', loaded, false);
</script>

I had the same problem with my custom script so I changed the code and now it's working nicely:
var myScroll;
function loaded() {
setTimeout(function(){
myScroll = new iScroll('wrapper');
myScroll.refresh();
} , 100 );
}
And I call it on "onDeviceReady":
function onDeviceReady()
{
loaded();
}

http://jsfiddle.net/Eccgy/
Check this may be help you

Here is a simple iscroller that would help .
its very easy to implement
include scripts and jsut add an attribute data-iscroll to the div, which you need the effect.
https://github.com/watusi/jquery-mobile-iscrollview