I have got an stretched section with multiple sections in it. These sections are aligned in my CSS as 'Justified'. In normal HTML code, this works fine. Like this:
Normal HTML - Example 1
I'd like to create this menu with js innerhtml. This because the <a> tags on the menu contains javascript functions. The problem is, the <a href> has to execute the javascript function when js is available, otherwise a normal url has to be opened.
I tried something like this, but when js is available, the browser still opens the href url after the function has been executed (of course).
<a href='when_js_is_not_available.html' onclick='whenJsIsAvailable()'>Link</a>
I found something for that:
<section id=menu>
<script>
loadMenu();
</script>
<noscript>
//Working html code, as showed on example 1
</noscript>
</section>
Javascript:
function loadMenu(){
document.getElementById('menu').innerHTML=""
+"<a href='javascript:about()'><section class='linkNav'>Over NKika</section></a>"
+"<a href='javascript:donate()'><section class='linkNav'>Doneren</section></a>"
+"<a href='#'><section class='linkNav'>Inschrijven</section></a>"
+"<a href='#'><section class='linkNav'>Fotos</section></a>"
+"<a href='#'><section class='linkNav'>Links</section></a>"
+"<section id='stretch'></section>";
}
This returns the same html code as example 1. However, the styling is not the same:
Wrong styling. Something has gone wrong with the stretching or something like that.
The problem has nothing to do with CSS, because in example 1 everything is fine.
The code looks exactly the same in the developers tools from Chrome and Firefox.
I have been working for hours on this, and tried a lot, but I don't know how to fix this.Thank you for your help.
how about this:
<script>
var onclicks=document.querySelectorAll('a[onclick]');
for (index in onclicks)
{
onclicks[index].href='#';
}
</script>
we select every anchor with a defined onclick event, then set its href attribute to #. So, if the browser has JS, this will fire, and remove hrefs. If there is no JS, then this will of course not fire, and the original hrefs will remain intact.
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.
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.
I recently setup custom rotational banners on my blogger using this code I come across but I can't seem to figure out how to make the images clickable to link to the homepage.
Any help would be much appreciated.
Heres the code:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="http://Example1.png"
HeaderImage[1]="http://Example2.png"
HeaderImage[2]="http://Example3.png"
HeaderImage[3]="http://Example4.png"
HeaderImage[4]="http://Example5.gif"
HeaderImage[5]="http://Example6.png"
HeaderImage[6]="http://Example7.png"
var random=Math.round(6*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
Its working now guys.
I just wasn't sure exactly where to put the tags everyone was teling me.
Thanks very much for all your help.
This code has issues with " instead of ". But aside from that, what this code is doing is setting the background image for an object with id="header". To make that object clickable, you can surround the header object with an <a> tag. For example, if the header object was a div, then you would use something like this:
<div id="header"></a>
If there's some reason why you don't want to use a link to make the area clickable (which is the simplest way to do it), then you could also use javascript like this:
document.getElementById("header").onclick = function() {
window.location = "http://my.example.com";
}
This would either be placed after the page HTML (so the object in question is already loaded when this code runs).
If you show us the actual HTML that includes the header object, we could be more specific about how to make it clickable.
From reviewing your HTML, if you want to make it clickable with just your HTML, you can change this part of your HTML:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
to this (which just surrounds it with an <a> tag:
<a href="http://my.example.com">
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/>
</b:section>
</a>
Well, you don't actually have any image elements, so that's your first problem.
The simplest solution (to make images clickable) is to wrap images in anchor tags with the href attribute set to your index. What it seems like you're actually doing is dynamically writing some css for an element with id #header and setting its background to the image. When you do this, there are no actual img elements, so there's nothing for a user to click on other than the element itself.
Without seeing any more of your markup, I'd suggest just wrapping your #header element in an anchor like this <a href='/'><some_element id='header'></some_element></a>
Idk how Blogger works, so I'll just tell you the quick and dirty way to get it working with javascript.
Put this after the code you showed us, even after the closing script tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#header').click(function() {
window.location = '/';
});
});
</script>
i have a jQuery code and the html code on my page. The code loads two php files on two DIVs, based on the value of a drop down list. The code is working great, loading pic and everything. However I have a small problem.
When I place the second div ( artistdetails ) inside of a seperated div from the first div, the loading pic does not appears on the second but only in the first. Content is appeared correctly though.
As I saw in firebug, the class is loading fine. I even changed the picture to something bigger but nothing was there. ( I mean the pic is not hidden somewhere).
I made a lot of experiment, I set the ID to the float:left div but nothing happens. I really need to have them in a separated DIV. Is that possible?
I would start looking at the final generated code (which you might post here or on pastebin.com with a link).
Sounds to me like something in the php forms is probably not generating valid html. For example, an unclosed entity.
It must work, i guess, if the class is added to <div id="artistdetails"></div>
Still try something like this
$('#artistdetails').empty()
.addClass('loading')
.load('forms/' + val + 'b.php',
function(){
setTimeout(
function(){ $('#artistdetails').removeClass('loading') },
2000);
});
I'm trying to create a JS-script to make modifications to add a footer to HTML -documents on the fly. The idea is to append a div-element at the end of the document to contain the footer, and to provide a floating fixed footer, I also need to have all of the other content wrapped in a div, basically I need something like this:
<html>
<head>
<title>Foobar</title>
</head>
<body>
<div id="contentWrapper">
<!-- Content is here -->
</div>
<div id="footerWrapper">
<!-- Footer goes here -->
</div>
</body>
</html>
The problem is, that the HTML is generated from a system where the end user's have had a little too much control over the structure (it's a blogging platform), and there's no guarantee of a certain sturcture hence I need to wrap the content in a div to ensure the footer works ok.
What I tried, and realized that doesn't work is:
$(document.body).wrap($('<div/>').attr('id','footerWrapper'));
The problem with this is that due to the fact that the HTML structure is generated by the user, I have been forced to inject links to the JS-file inside the <body>-tag. So now when I call wrap(), it seems that everything is first removed from $(document.body) and then appended in the new div. Since the JS-files are linked from inside , calling wrap() seems to remove them momentarily, and it seems that the scripts are unloaded by the browser and everything stops working and I'm left with a blank page. Not exactly what I had in mind.
Next idea was to first copy the JS-tags to the head-element to preserve them, so I wrapped them in a div (yeah, ugly, I know), and tried to copy them to the :
$(document.head).append($('#copyToHead').html());
That didn't do anything, and seems that $(document.head) isn't usable with functions such as .html() and .append().
So, now I'm out of ideas. Anyone have any ideas?
$(document.head) isn't usable with functions such as .html() and .append().
That would be because document.head is undefined
Use $("head")[0]
not clear on what your are trying to add to the head part. if you are simply trying to add a div to the end here is a solution:
$(document).ready(function(){
$(document.body).append($('<div></div>').attr('id','mydiv').html('This is footer'));
});
idea
If leave fact, that $(document.body) doesn't exist, wrapping everything into div and then setting id through attr might be problematic (don't ask me why—it just happens). So I played with it and created this little snippet (with preview, 100% working).
Since you can't play with html, but can "append" script I did whole document manipulation through inline script.
code
<script type="text/javascript">
$(document).ready(function(){
$("body")
.wrapInner('<div id="wrapper"/>')
.append('<div id="footer">footer text</div>');
});
</script>
preview
http://jsbin.com/ezoqo4/3
edits:
further simplification and proper markup generation
I believe this should serve you better:
$('body')
.children ().wrapAll ($('<div/>').attr('id','contentWrapper'))
.end ()
.append ($('<div/>').attr('id','footerWrapper'))
;
Ref: wrapAll