I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.
Related
I have a bookmarklet that's about 100 lines long. Normally I'd attach the bookmarklet code to an anchor tag like so:
<a href=javascript:function(){ * TEH CODEZ *} >
This is of course so someone can click and drag the link to their bookmarks bar for simple setup of the bookmarklet.
The problem is I don't know how to do the same thing with a long bookmarklet. Right now I'm including the code directly into a DIV tag then using JS to attach the contents of the div to the href attribute of the anchor tag directly:
<div id="bookmarklet_code" class="hide">
<?php include('bookmarklet.js'); ?>
</div>
<script>
$('#bookmarklet_anchor').attr('href',$('#bookmarklet_code').html());
</script>
Sadly this doesn't work so I must still be doing something wrong. I can drag it to my bookmarks bar ok, but when I review the code, it has extra characters and doesn't work. Clearly I'm missing some fundamental information about how this is supposed to work.
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
I am creating a JavaScript bookmarklet to toggle the visibility of an HTML Element on a page, but it seems like just hiding the element is troublesome:
http://codepen.io/anon/pen/HtkzL
Code:
<div id="hideme">
<p>I am a div that needs to be hidden</p>
</div>
<p>I am a paragraph that doesn't need to be hid.</p>
<blockquote>
I am a blockquote that the whole world must see
</blockquote>
Click me to hide the div.
what's happening is that every the anchor link is clicked, the entire page goes blank and says "none".
When I inject the exact same code in the <a> ... </a> in a JS console, it works just fine.
Any possible fixes for the problem?
It actually is hiding the element, but it's also following your anchor right after (to nowhere). You can return false, or a falsy value. I'd wrap it in void which will return undefined, but either will work. Here's your codepen and the code: http://codepen.io/anon/pen/dsgKk
Click me to hide the div.
(This would also work, but is less clean, imo):
Click me to hide the div.
getElementById('hideme');a.style
Offhand, I'd say because the browser is confused with your variable name;
also, the code would be:
getElementById('hideme').style.display.....
My friend done this below coding for custom control
click
now i want to show confirm dialog box while click this anchor link.
Is it possible?. i want to write script as inline.
Do this :
click
But at some point, you'd want to stop using only inline code and have a look at other clearer ways to add javascript in your code.
You may use a script block like this in the HEAD of your HTML file :
<script>
function doOnClick(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
}
</script>
And then your link becomes
click
Of course, this doesn't feel much simpler with only one function but it helps you put all your functions in the same place and make lighter and clearer html.
An alternative would be to use jQuery, so that you may totally avoid putting javascript in the html part.
The html is then
<a id=myLink>click</a>
And your script, now at the end of the body, is this one :
<script>
$(document).ready(function(){
$('#myLink').click(function(){
if (window.confirm('Really?')){
__doPostBack('id','msg');
};
});
// other codes will come here
});
</script>
You're not at all required to code it this way now, as you only have a very light function, but if your code grows I suggest you start considering it and look at the jquery tutorials.
Of course. Here is a small snippet, not elegant but it works...
click
I actually had to look this up because I haven't used confirm, alert and prompt in a very long time.
confirm returns true/false depening on what the user selected (OK/Cancel, respectively).
So your resulting code would be
click
If you view this page http://www.herkimer.edu/news/view/community_members_complete_jointly_offered_machine_operator_training_progra/
You'll notice a green bar (screen-shot: http://grab.by/1msh) at the very top. It has something to do w/ the addthis widget you'll see underneath the h1 title.
If you reload the page a couple times, the bar goes away, probably because the script is cached and does not delay, resulting in that extra space at top.
Do you know what I could do to resolve this? Any help is appreciated.
I'm assuming that you don't want the DIV to display. You could add some CSS to the page to hide it. It has id atffc (and contains a Flash object, but I don't know that it needs to be visible).
#atffc { display: none; }
I think in addition to just hiding your extra div you may want to move the elements to the bottom of your page so they are evaluated after the add_this anchor tag () is created and ready. That would help with potential timing issues to make sure the element is loaded and ready before their code starts to try to manipulate it.
I had the same problem and I downloaded their new code
http://www.addthis.com/web-button-select
I selected "no analytics" and I think they now strip out the flash part when using no analytics. I haven't had the problem again the last time I checked but I'll need more time to confirm this.
You might want to try to do the same
A bit late, but try adding this code AFTER the AddThis button code:
<script type="text/javascript">
var addthis_config = {
data_use_flash: false
}
</script>
Source:
http://www.addthis.com/forum/viewtopic.php?f=4&t=22569&sid=fec603f0cac141b4856eddab92c8e63e&start=10