Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.
Related
I am trying to create a hint Button that displays the text when it is clicked. I know how to create using javascript in HTML but I am having difficulty creating it in jquery. Can somebody please give me an idea.
javascript code in HTML:
<button type="button" onClick="myFunction()">Hint!</button>
<p id="hint"></p>
<script>
function myFunction() {
document.getElementById("hint").innerHTML = "<em><u>hint here.</u></em>";
}
</script>
Assuming you have only one button, you can bind the event click and use the selector #hint.
The function $.html is used to set HTML code to the selected elements.
$('button').on('click', function() {
$("#hint").html("<em><u>hint here.</u></em>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Hint!</button>
<p id="hint"></p>
I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}
Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.
I have been bashing my head against a wall for about 4 hours now trying to figure out why this wont work. I have a program that needs to dynamically write code depending on the number of results from an SQL query.
I am using a jquery lightbox called EasyBox. When it is hard-coded like this, it works:
<body id="body" onload="bodyLoaded()">
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a>
<div id="test" style="display:none; width:320px; height:240px">
<p>Test Content</p>
</div>
<script type="text/javascript">
function bodyLoaded(){
$('#link').attr('onclick', 'logText("Hello")');
}
function logText(message){
console.log(message);
}
</script>
However, when I have the link written dynamically like this, the EasyBox popup does not fire.
<body id="body" onload="bodyLoaded()">
<div id="test" style="display:none; width:320px; height:240px">
<p>Test Content</p>
</div>
<script type="text/javascript">
function bodyLoaded(){
document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";
$('#link').attr('onclick', 'logText("Hello")');
}
function logText(message){
console.log(message);
}
</script>
Any ideas why this would work? I am pulling my hair out here!
I don't understand why you're not just using jQuery for all of this.
$(function(){
$('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>");
$('#link').click(function(){
alert("Hello");
});
});
If the .click() doesn't work, you could also try .live(). Both worked for me in jsfiddle(http://jsfiddle.net/LZxrL/ and http://jsfiddle.net/LZxrL/1/).
Also, why does everyone keep saying there is no element with id='body' when the body element itself has the id of 'body.' Clearly, he wants to add a link to the body.
EDIT: I just read your comment on another post about the issue being the lightbox, not the click event. That DOES change things. I'm not familiar enough with that plugin to comment authoritatively, but I would suspect that the plugin looks for rel="lightbox" when the page loads and any elements added afterward won't be caught. Most plugins have a manual method, something like:
$('#link').lightbox();
I'm not seeing where you are loading the dynamic tags in your script. bodyLoaded() function is looking for anything with id='body' and in your second block of code I don't see any with that id tag.
Here's my issue.
I have a javascript function that update a div when i click the proper link. And it is working.
Since i have cliked the link my div content is updated with another Javascript. This time to close it.
Its fairly simple but i cant get it to work and i dont know why!
Here is the code that is in the page when it load for the first time
The div id config_window
<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn"class="admin_btn">administration.</div>
<div id="test">test</div>
</div>
Now the Javascript that call for the update inside that div
<script language="javascript" type="text/javascript">
$("#admin_btn").click(
function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
}
);
</script>
So far it's working my div is getting updated and i see the new content. The new content is
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn_x" class="admin_btn">Terminer.</div>
<script language="javascript" type="text/javascript">
$("#admin_btn_x").click(
function(){
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
}
);
</script>
i was expecting that same function to work but its not!! and i dont get why since the first one is.
Could it be becuse my second script is in the div that get updated??
Thanks!
I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.
<script type="text/javascript">
$("#admin_btn").live('click', function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
});
);
$('#admin_btn_x').live('click', function() {
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
});
</script>
Is there a reason you add divide the function into two scripts? I would change your script to something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#config_window').hide(); // just in case
$('#admin_btn').bind("click", function() {
if($('#config_window').is(':hidden')){
$('#config_window').show();
config_set('config_window','open','var')
} else {
$('#config_window').hide();
config_set('config_window','close','var')
}
});
});
</script>