How to make images clickable in javascript? - javascript

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 &quot 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>

Related

Javascript Innerhtml - Strange style thing

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.

Why this pop up is not shown?

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.

Removal of link using JQuery

I am trying to do a very simple task but I cannot seem to figure it out. I am trying to write a function that will remove a link without removing the text associated with it. Here are the specifics:
Categories[/CODE]
I am trying to remove everything EXCEPT the text "Categories", I just want to remove the href tag. I would even be willing to rename the title "Categories". I just want to link gone. This link is in a div called "mw-normal-catlinks" and it is the first link in the div. I do not want to remove the other content in that div.
I am very new to jQuery and so far I have an idea of what to do. This is what I got:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#mw-normal-catlinks a.first').replaceWith('Categories');
</script>
Now I am not sure if I am missing anything because when i put this in my HTML code, nothing happens. I'm not sure if I need to add a div to make it work.
I want to eventually implement this into a PHP coded tool I use to convert wiki pages to html so maybe I will need to add some sort of div?
Thanks everyone!
Use .unwrap()
$('#mw-normal-catlinks a.first').contents().unwrap();
Also you probably want this selector instead since your a tag doesn't have a class of .first:
$('#mw-normal-catlinks a:first-child').contents().unwrap();
.first means "A member of the class first", you might be confusing it with :first-child or :first-of-type

Applying a CSS class to a javascript popup window

I have a popup window working with the following code, but I need to amend it to apply a CSS class to either the HTML tag or the Body tag, so I can style the popup window differently than the normal site.
Here's the code I'm currently using:
<script language="javascript" type="text/javascript">
<!--
/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}
// -->
</script>
I tried to add a line right after the win=window.open line that looked like this:
win.document.getElementById('body').className += " popup";
Unfortunately it didn't work. Any ideas on how I can make it so if a window is popped up using this javascript function it'll apply a CSS class to the window?
The HTML call to the function was with this code, if it matters.
<li>Play in pop up | </li>
Alternatively I've tried using this jquery version of a popup window (http://swip.codylindley.com/popupWindowDemo.html), but haven't figured out how to do it this way either. Thank you so much for your help, this has been killing me all day!
As you can see u are trying to reach object with id='body'.
However i think that your markup looks like
<body> ... </body>. If that's true then You can't use JS function getElementById because You have no ID on body element :)
The solution would be <body id='body'> ... </body>
Also You can use different JS function to select the body.
var body = document.getElementsByTagName( "body" );
win.document.getElementById('body')
will look for DOM element which matches the provided ID and in this case there is no element whose ID is body.
try to replace this with win.document.getElementsByTagName('body'). this should give you the body tag then you can apply the CSS class to it.
Since you will only have one body in your document you can directly assign the class to body tag in popup HTML itself.

Manipulating <body> with jQuery? (Or figuring a better solution)

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

Categories

Resources