This is my code:
$(document).ready(function () {
var na = $("#navDivA");
var nb = $("#navDivB");
var ca = $("#contentA");
var cb = $("#contentB");
var la = $("#home");
var lb = $("#about");
var firstSession = true;
na.on("click", function () {
ca.load("home.html", function(){
alert("Loaded");
});
});
nb.on("click", function () {
cb.load("about.html");
});
});
<div id="wrapper">
<div id="navDivA"><a id="home">Home</a></div>
<div id="navDivB"><a id="about">About</a></div>
<div id="contentA"></div>
<div id="contentB"></div>
</div>
Why does it alert multiple times every time I start to click? How can I avoid this? I want to load the html file once.
You can use function one instead of on. According to documentation
The handler is executed at most once per element per event type.
which seems to be what you need. Change the code to
na.one("click", function () {
ca.load("home.html", function(){
alert("Loaded");
});
});
nb.one("click", function () {
cb.load("about.html");
});
Related
I have some variables in the following JS:
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
}
As you can see, the variable is "allcompanynames".
However, how do I pass them and show it on the popup.html page?
I have tried
<script type="text/javascript" src="companynames.js"></script>
<p id="allcompanynames"></p>
no luck. What's wrong?
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn4').addEventListener('click', getbg);
});
getbg = function()
{
chrome.runtime.getBackgroundPage(
function (bg) {
var allcompanynames = bg.companynames;
alert(allcompanynames)})
document.getElementById("allcompanynames").innerHTML(allcompanynames)
}
I'm guessing you should add that last line after displaying the pop up to add the content into the page.
Write your code in this way
var background = chrome.extension.getBackgroundPage();
var allcompanynames = background.companynames;
alert(allcompanynames)
Is it possible to change the order of events to invoke alert function with message Huh? first and only then next alert with 'Yeah!' message?
<div class="elem" onclick="alert('Yeah!')"></div>
My jQuery code.
$('.elem').click(function () {
alert('Huh?');
})
Link to jsFiddle: http://jsfiddle.net/84Lyq3n9/
How about this:
var inline_click_handler_src = $('.elem').attr('onclick');
var inline_click_handler = new Function('e', inline_click_handler_src);
$('.elem').removeAttr('onclick');
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[Edit] Or without mucking with markup content:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler();
});
[One more edit] In case your inline click handler uses this, use function.call(), to set the execution context:
var el = $('.elem').get(0);
var inline_click_handler = el.onclick;
el.onclick = null;
$('.elem').click(function () {
alert('Huh?');
inline_click_handler.call(el);
});
But you can do it with many ways.
First you can remove the attribute "onclick".You can do it with javascript.
$('.elem').removeAttr("onclick");
$('.elem').click(function () {
alert('Whatever you want');
alert('Huh?');
})
Here is a link: http://www.w3docs.com/learn-javascript/javascript-events.html
Hello I had this problem which for some reason only occurs when I upload it to my website server the problem is I need a group of images to be the same size as another group of divs and I need this function to load on ready and resize but the function will only work when I resize the document/window rather than ready/load, when I need it to do both.
$(document).ready(function(){
$(window).on('resize ready', function(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});
});
Well you are adding the ready event listener inside $(document).ready() which runs only after the document is ready. so the ready won't be fired.
try this:
$(document).ready(function(){
myFunction();
$(window).on('resize', myFunction);
});
function myFunction(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
}
document.onready = whatToDoOnResizeOrLoad;
window.onresize = whatToDoOnResizeOrLoad;
function whatToDoOnResizeOrLoad(){
var heightval = $('#main-contentp1').height();
$("#fom-desc").height(heightval);
var heightvalb = $('#moodboard-box-ca').height();
$("#vmt-pic-sec").height(heightvalb);
var heightvalc = $('#view-blog-seca').height();
$(".vmt-pic-sec").height(heightvalc);
});
I've created some JavaScript using Jquery, for the page animation :
I trying to optimize it since i repeat the same thing for subtab1, subtab2, subtab3.
The same function is executed for all of them, and the only thing is changes is variable i iterating on?
Any suggestion?
<script type="text/javascript">
$(document).ready(function () {
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
var $fundosdiponiveis = $('#fundosdiponiveis');
var $fundosdiponiveisTab = $('#tabs1');
$defensivo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$defensivoSubTab.removeClass("hide");
$defensivoSubTab.show();
});
$equilibrado.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$equilibradoSubTab.removeClass("hide");
$equilibradoSubTab.show();
});
$activo.live('click', function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
$activoSubTab.removeClass("hide");
$activoSubTab.show();
});
});
</script>
For a while:
var $fundosdiponiveis = $('#fundosdiponiveis');
This is my default div.
var $defensivoSubTab = $('#subtab1');
var $equilibradoSubTab = $('#subtab2');
var $activoSubTab = $('#subtab3');
That divs apears when i clicking on one of the following tabs:
var $defensivo = $('#defensivoimg');
var $equilibrado = $('#equilibradoimg');
var $activo = $('#activoimg');
And that button hides and changes style"display" to none, on click, of my three #subtab's
var $fundosdiponiveisTab = $('#tabs1');
Any suggestion?
You could write a function that returns the proper function:
function createShowTabFunc(tab) {
return function () {
$fundosdiponiveis.removeClass("subshow show").addClass("hide");
tab.removeClass("hide");
tab.show();
}
}
Then assign your click handlers:
$defensivo.live('click', createShowTabFunc($defensivoSubTab));
$equilibrado.live('click', createShowTabFunc($equilibradoSubTab));
$activo.live('click', createShowTabFunc($activoSubTab));
Have a common class attribute to all the tab's and you just need to write $('.class').click() and in this get the id of the corresponding tab and according to the id fetched by attr function, you can have an if else to define your variables inside the if else and execute your code block.
I have the following snippet:
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});
But when I test it and click on close for example I get this error message:
node.hide is not a function
node.hide(true);
Any idea why?
You may have to show us your HTML because with the right javascript includes and appropriate HTML, it works fine here: http://jsfiddle.net/jfriend00/27fJW/. So, I would suspect that you either don't have the right HTML or you don't have the right core YUI includes.
HTML I made up to match the code:
<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>
<button id="subscribe">Open</button>
<button id="close">Close</button>
<div id="popup-subscribe">Popup content</div>
Your code (unchanged):
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});