Develop Reference

How make checkbox being true/false just after you checked them

I'm making a "What language you should learn"site but more complex
I don't know why but when i check my checkbox,they don't became true but when i reload the page now they are true
if (document.getElementById("langage1").checked) {
html = true;
}
if (document.getElementById("langage2").checked) {
phpmysql = true;
}
if (document.getElementById("langage3").checked) {
js = true;
}
if (document.getElementById("langage4").checked) {
python = true;
}
if (document.getElementById("langage5").checked) {
java = true;
}
if (document.getElementById("langage6").checked) {
swift = true;
}
if (document.getElementById("langage7").checked) {
batch = true;
}
if (document.getElementById("langage8").checked) {
jquery = true;
}
if (document.getElementById("langage9").checked) {
c = true;
}
if (document.getElementById("langage10").checked) {
cplus = true;
}
if (document.getElementById("langage11").checked) {
objectivec = true;
}
if (document.getElementById("langage12").checked) {
cdiaise = true;
}
if (document.getElementById("langage13").checked) {
construct = true;
}
if (document.getElementById("langage14").checked) {
wordpress = true;
}
if (document.getElementById("langage15").checked) {
unity = true;
}
if (document.getElementById("langage16").checked) {
gamemaker = true;
}
if (document.getElementById("langage17").checked) {
unreal = true;
}
if (document.getElementById("langage1").checked === false) {
html = false;
}
if (document.getElementById("langage2").checked === false) {
phpmysql = false;
}
Here is an example of the commands that should make them true,any idea how to fix that?

You have to add eventlisteners
document.getElementById("langage1").addEventListener("click", myFunction);
// example function
function myFunction() {
document.getElementById("langage1").innerHTML = "YOU CLICKED ME!";
}
This way you tell javascript to fire when you do something, in this chase a click. So every time you click the checkbox myFunction() fires

How can I change style of element with jQuery function and media query when resize event working

I'm making a responsive web site, and I have some problems at resize.
I using media query at ww<1280, ww<1024, ww<640, then controll elements with Jquery Functions.
when document loaded, media query and functions are worked well.
but, when I try some jquery functions then resize window, there are so many problems.
one of function I wrote is,
var menuOpen = function() {
var ctryBtn = $(".countryMenu input[type=button]");
var ctryMenu = $(".countryMenu");
var subGnb = $("#subGnb");
var gnbBtn = $("#header button.mobileGnbBtn");
var myGnb = $("#gnb");
var schBtn = $(".mobileFindBtn");
var schMenu = $(".utilMenu");
var gnbDown = function () {
$("#gnb ul").append("<li class='mobileSiteMap'><a href='siteMap.html'>Site Map</a></li>");
myGnb.slideDown(500,function () {
$(".mobileGnbBtn").css({
"width":"37px",
"height":"37px",
"background-image":"url(image/common/btn-close-mobile.png)",
"background-size":"cover"
});
});
};
var gnbUp = function () {
if ($(window).width() <= 623) {
myGnb.slideUp(500, function () {
$(".mobileSiteMap").remove();
$(".mobileGnbBtn").css({
"width":"43px",
"height":"37px",
"background-image":"url(image/common/btn-menu-mobile.png)"
});
});
} else {
$(".mobileSiteMap").remove();
return false;
}
};
ctryBtn.on("click", function () {
if(isSubGNB === false){
subGnb.slideDown(500);
isSubGNB = true;
} else {
subGnb.slideUp(500);
isSubGNB = false;
}
});
gnbBtn.on("click", function () {
if(isGNB === false){
if(isSubGNB === true || isSearch === true){
subGnb.slideUp(500);
isSubGNB = false;
schMenu.slideUp(500);
isSearch = false;
ctryMenu.fadeIn(300);
}
gnbDown();
isGNB = true;
} else {
gnbUp();
isGNB = false;
}
});
schBtn.on("click", function () {
if (isSearch === false) {
if (isGNB === true || isSubGNB === true ) {
gnbUp();
isGNB = false;
subGnb.slideUp(500);
isSubGNB = false;
}
ctryMenu.fadeOut(100);
schMenu.slideDown(300);
isSearch = true;
} else {
schMenu.slideUp(100);
isSearch = false;
ctryMenu.fadeIn(300);
}
});
};
#gnb is absolute positioned at ww<640, invisible(display:none), and different children elements setting with another ww sizes.
#gnb is relative positioned at upper 640px ww.
Then I wrote resize event like:
$(window).on("resize", function () {
var gnbPC = function () {
$("#gnb").css({
"width":"410px",
"height":"76px",
"letter-spacing":"-0.04em",
"margin-left":"26.866%"
});
};
var toggleMobile = function () {
if ($(window).width() <= 623 ) {
$("#subGnb").css({"display":"none"});
} else {
gnbPC();
$("#subGnb").css({"display":"none"});
}
};
clearTimeout(timer);
timer = setTimeout(toggleMobile, delta);
});
I set var delta = null; var timer = null;
Under 640px ww, when I click button, #gnb slideDown, and slideUp well.
when #gnb slideUp, then I try resize to upper 640px,
there is no #gnb because it had invisibled when slideUp() finished.
So I try to give it CSS set(default value of CSS ww>640),
but it is written inline, then mediaQuery didn't work.
I want some solution, when I trying resize window,
function work then reload for default setting for ww size.
Or, solve this resizing problems.
I want reset when resize,
if #gnb opened, then I try resize, I want it closed then change to default setting for ww size.

Removing delay or placing a listener to swfobject once its done loading

I am trying to embed an swf
Here is my code
<script type="text/javascript">
function initSwf(path)
{
var playerso = new SWFObject(path.concat("/playerHD.swf"), "player01", "600", "450", "9");
playerso.addParam("quality", "high");
playerso.addParam("allowScriptAccess", "always");
playerso.addVariable("xml", path.concat("/xml/details.xml")); // Data xml URL
playerso.addVariable("path", path.concat("/files/")); // URL for assets (swf & jpg)
playerso.write("dviewDiv");
jQuery(document).ready(function()
{
setTimeout( function()
{
jQuery('#mySliders').addClass('hide');
jQuery('#sliderloading').addClass('hide');
jQuery('#dviewDiv').removeClass('hide');
}
, 7000 );
});
}
</script>
The problem with this swfobject is, while it loads, it shows a blank screen or white or whatever background i provide. Which seems bad user experience
I want to modify the library so that while it buffers, i can show some other images and when its buffer is complete it disappears.
As in my code above i have placed a 7 second delay on removing images. It helps but still sometimes the loading takes more than 7 seconds. Is there any possiblity or any modification i can do to find out when it finishes loading so i can remove images then.
example can be viewed on
thevowapp.com/webapp/test.php
Press on 3D BUtton to load the swf file
The library code is as follow
The javascript opensource library i am using has following code
/**
* SWFObject v1.4: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
*
* SWFObject is (c) 2006 Geoff Stearns and is released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* **SWFObject is the SWF embed script formerly known as FlashObject. The name was changed for
* legal reasons.
*/
if (typeof deconcept == "undefined") {
var deconcept = new Object();
}
if (typeof deconcept.util == "undefined") {
deconcept.util = new Object();
}
if (typeof deconcept.SWFObjectUtil == "undefined") {
deconcept.SWFObjectUtil = new Object();
}
deconcept.SWFObject = function (_1,id,w,h,_5,c,_7,_8,_9,_a,_b) {
if(!document.createElement||!document.getElementById){
return;
}
this.DETECT_KEY = _b?_b:"detectflash";
this.skipDetect = deconcept.util.getRequestParameter(this.DETECT_KEY);
this.params = new Object();
this.variables = new Object();
this.attributes = new Array();
if (_1) {
this.setAttribute("swf",_1);
}
if (id) {
this.setAttribute("id",id);
}
if (w) {
this.setAttribute("width",w);
}
if (h) {
this.setAttribute("height",h);
}
if (_5) {
this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));
}
this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion(this.getAttribute("version"),_7);
if (c) {
this.addParam("bgcolor",c);
}
this.addParam("wMode","transparent");
var q=_8?_8:"high";
this.addParam("quality",q);
this.setAttribute("useExpressInstall",_7);
this.setAttribute("doExpressInstall",false);
var _d=(_9)?_9:window.location;
this.setAttribute("xiRedirectUrl",_d);
this.setAttribute("redirectUrl","");
if (_a) {
this.setAttribute("redirectUrl",_a);
}
};
deconcept.SWFObject.prototype = {
setAttribute:function(_e,_f) {
this.attributes[_e] = _f;
},
getAttribute:function(_10) {
return this.attributes[_10];
},
addParam:function(_11,_12) {
this.params[_11]=_12;
},
getParams:function() {
return this.params;
},
addVariable:function(_13,_14) {
this.variables[_13]=_14;
},
getVariable:function(_15) {
return this.variables[_15];
},
getVariables:function() {
return this.variables;
},
getVariablePairs:function() {
var _16=new Array();
var key;
var _18=this.getVariables();
for(key in _18){
_16.push(key+"="+_18[key]);
}
return _16;
},
getSWFHTML:function() {
var _19="";
if (navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length) {
if (this.getAttribute("doExpressInstall")) {
this.addVariable("MMplayerType","PlugIn");
}
_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\"";
_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";
var _1a=this.getParams();
for (var key in _1a) {
_19+=[key]+"=\""+_1a[key]+"\" ";
}
var _1c = this.getVariablePairs().join("&");
if (_1c.length>0) {
_19+="flashvars=\""+_1c+"\"";
}
_19+="/>";
} else {
if (this.getAttribute("doExpressInstall")) {
this.addVariable("MMplayerType","ActiveX");
}
_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\">";
_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";
var _1d=this.getParams();
for (var key in _1d) {
_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";
}
var _1f=this.getVariablePairs().join("&");
if (_1f.length>0) {
_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";
}
_19+="</object>";
}
return _19;
},
write:function(_20) {
if (this.getAttribute("useExpressInstall"))
{
var _21=new deconcept.PlayerVersion([6,0,65]);
if (this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version")))
{
this.setAttribute("doExpressInstall",true);
this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));
document.title=document.title.slice(0,47)+" - Flash Player Installation";
this.addVariable("MMdoctitle",document.title);
}
}
if (this.skipDetect || this.getAttribute("doExpressInstall") || this.installedVer.versionIsValid(this.getAttribute("version")))
{
var n=(typeof _20=="string")?document.getElementById(_20):_20;
n.innerHTML=this.getSWFHTML();
return true;
}
else
{
if(this.getAttribute("redirectUrl")!="")
{
document.location.replace(this.getAttribute("redirectUrl"));
}
}
return false;
}
};
deconcept.SWFObjectUtil.getPlayerVersion = function (_23,_24) {
var _25=new deconcept.PlayerVersion([0,0,0]);
if (navigator.plugins&&navigator.mimeTypes.length) {
var x=navigator.plugins["Shockwave Flash"];
if (x&&x.description) {
_25=new deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));
}
} else {
try{
var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
for(var i=3;axo!=null;i++) {
axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);
_25=new deconcept.PlayerVersion([i,0,0]);
}
} catch(e) {}
if(_23&&_25.major>_23.major) {
return _25;
}
if (!_23||((_23.minor!=0||_23.rev!=0)&&_25.major==_23.major)||_25.major!=6||_24) {
try {
_25=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
} catch(e) {}
}
}
return _25;
};
deconcept.PlayerVersion = function(_29) {
this.major=parseInt(_29[0])!= null?parseInt(_29[0]):0;
this.minor=parseInt(_29[1])||0;
this.rev=parseInt(_29[2])||0;
};
deconcept.PlayerVersion.prototype.versionIsValid=function(fv) {
if(this.major<fv.major){return false;}
if(this.major>fv.major){return true;}
if(this.minor<fv.minor){return false;}
if(this.minor>fv.minor){return true;}
if(this.rev<fv.rev){return false;}
return true;
};
deconcept.util = {
getRequestParameter:function(_2b) {
var q = document.location.search || document.location.hash;
if (q) {
var _2d = q.indexOf(_2b+"=");
var _2e = (q.indexOf("&",_2d)>-1)?q.indexOf("&",_2d):q.length;
if (q.length>1&&_2d>-1) {
return q.substring(q.indexOf("=",_2d)+1,_2e);
}
}
return "";
}
};
if (Array.prototype.push==null) {
Array.prototype.push=function(_2f) {
this[this.length]=_2f;
return this.length;
};
}
var getQueryParamValue=deconcept.util.getRequestParameter;
var FlashObject=deconcept.SWFObject; // for backwards compatibility
var SWFObject=deconcept.SWFObject;

Similar to this question
Flash Player exposes a PercentLoaded property for the SWF, which you can poll while the SWF loads. Once it reports 100% you can manipulate your DOM (eg hide images) as you describe in your question. Be aware that you can't completely hide your SWF (mask or place off-screen), as this will prevent the SWF from loading in some browsers.
I wrote a tutorial for polling PercentLoaded with SWFObject a few years ago. It uses SWFObject 2.x, which is completely different syntax from 1.4. FWIW, SWFObject 1.4 is really old and is known to have bugs. I suggest using SWFObject 2.3 beta.

I was trying to make a news ticker. But there's an error when mouse leaves after hover

After Mouse Leave the ticker starts to move at a very high speed. Don't know what's the error.
Javascript:
$('#tick2').html($('#tick').html());
var temp=0,intervalId=0;
$('#tick li').each(function() {
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#tick').css({'width':temp+40, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){
var offset=$(this).offset();
var offsetLeft=offset.left;
$(this).css({'left':offsetLeft+temp});
temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});
function abc(a,b) {
$('#outer').mouseenter(function() { window.clearInterval(intervalId);intervalId=0; });
$('#outer').mouseleave(function() { start(); })
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
$("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
$("#"+b).css({'margin-left':temp});
}
}
function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }
start();
You can check the working demo here : http://jsfiddle.net/mstoic/juJK2/

Well, you nearly blew up my browser! Can you try this instead:
function abc(a,b) {
var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
$("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
$("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
$("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
$("#"+b).css({'margin-left':temp});
}
}
function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }
$(function(){
$('#outer').mouseenter(function() { window.clearInterval(intervalId); });
$('#outer').mouseleave(function() { start(); })
start();
});
Working fiddle: http://jsfiddle.net/juJK2/1/
You should only bind your event handlers once, not every time you enter abc();

How would I toggle the state of a setInterval function in jQuery?

I want to be able to click a an element with an id of pause to start a count of the elements in a time object and if I re click the pause it will stop it and reclick start it exactly like the toggle feature in JQuery but with a setInteval function how would I go about doing this?
$("#pause").click(function(ffe) {
if(on == true) {
on = false
alert("on");
}
else {
on = true;
alert("off");
}
if(on == false) {
setInterval(function() {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}, 100);
}
else {
alert("Error");
}
});

A classic technique is to use a single master setInterval loop and simply use if..else logic to determine what needs to run. This is how a lot of javascript games work:
var on = true;
// Our master scheduler:
setInterval(function() {
if (on) {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}
}, 100);
// Code to handle the pause button
$("#pause").click(function(ffe) {
on = !on;
}

You can use the setTimeout function, if you want to run the function once, setInterval runs continuously, try the following:
var on = false;
$("#pause").click(function(ffe) {
if (on) {
on = false;
setTimeout(function() {
$("#timet ul").append("<li>" + $("#time ul")
.children('li').length +"</li>");
}, 100);
} else {
on = true;
}
});

You need to use .clearInterval() to stop the execution.
Here is the code: (THE WORKING DEMO)
$("#pause").click((function () {
var interId = null;
var $ul = $("#timet ul");
return function (e) {
if (interId) {
$(this).text("start");
clearInterval(interId);
interId = null;
} else {
$(this).text("pause");
interId = setInterval(function () {
$ul.append($('<li>').text($('li', $ul).length));
}, 100);
}
};
}()));​