I have a page with 4 images and a div box containing some text. When I click on one of the images I want the text to change to something else.
My goal is to be able to click on each image and get information about them without making an entirely different HTML just for a slight change in one div.
<script type="text/javascript">
function changeText(){
document.getElementById('MyDiv').innerHTML = 'New Text';}
</script>
<img src="images/about.jpg" onClick="changeText()">
<div class ="text" id="MyDiv"><p>Welcome blabla</p></div>
This is the code I've been trying to make it work but it doesn't. I'd like to code it in Javascript as well.
Do you mean information about the image itself? If you want for example the value of src or perhaps title or some other attribute, you could do something like:
<script type="text/javascript">
function changeText(obj){
var div=document.getElementById('MyDiv');
div.innerHTML='';
var p=document.createElement('p');
p.appendChild(document.createTextNode(obj.title + ' '+ obj.src));
div.appendChild(p);
}
</script>
<img src="images/about.jpg" title="About Something" onclick="changeText(this)" style="cursor: pointer;" />
<div class="text" id="MyDiv">
<p>Welcome blabla</p>
</div>
The p tag will be overwritten to include the title and src of the image (in this example)
use Jquery html function
$('myImgClass').html('myText');
Related
I whant to write Links in the data atribute and to save up code lines I whant to create the links with a standart text and the href of course with js/jquery
var mdUrl = $(".md")this.data('md');
$(this).html("YES click <a href='" + mdUrl + "'>here</a>");
If i understand it right, you want sth like this
<div class="md" data="coolsite.com">content.</div>
converted to:
<div class="md">content click here</div>
You could do this with the following js:
<script>
window.onload=function(){
mds=document.getElementsByClassName("md");
mds.forEach(function(md){
md.innerHTML=md.innerHTML+"<a href='"+md.data+"'> click here</a>";
});
};
</script>
This loops trough the elements with the "md" class and adds a link to their inner html
In "first.html", I load a page inside div using Javascript.
<div id="content">
<div id="lot">Next</div>
</div>
<script>
function load_page()
{
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"></object>';
}
</script>
Both "first.html" and "next.html" have a div called "banner". I don't want to show "banner" in "next.html". So I add the following lines in "next.html".
<script>
document.getElementById('banner').style.display = "none";
</script>
The weird thing is the banner in "first.html" disappears but not the one in "next.html".
So one way I think to get away with it is if I could reference like this.
"first.html" --> "lot" --> "next.html" --> "banner"
Then try to make it disappear.
I also try this in "next.html", but not working.
<script>
document.getElementById('lot').getElementById('banner').style.display = "none";
</script>
Thanks for the hint.
Solution: When I use iframe, it seems to work. The banner in "next.html" is clearly recognized instead of mixing with the one in "first.html".
I think the simple solution is to use different ID's for the different banners. Something like
id="innerBanner" and id="outerBanner"
Iframe syntax:
<iframe src="URL" width="xxx" height="xxx"></iframe>
I think your problem comes from the folowing line :
document.getElementById("lot").innerHTML='<object type="text/html" data="next.html"> </object>'\
Mabye you can do the same thing with a simple hyperlink:
Next
Than there is no chance, after you write the style in next.html, that it will change something in the previous page's html
I have this code for a small jQuery game I'm making, and all the pictures (characters) are hidden by default. There's a question that says "Are you ready to play?" and a yes or no button. When you click the yes button, it hides the buttons and the text. It is also supposed to display the first image, which is #main. For some reason, it's not working.
Here's the jQuery code with the images under:
$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);
var main=$('#main');
batman=$('#batman');
car=$('#car');
hobo=$('#hobo');
cop=$('#cop');
knife=$('#knife');
gangfight=$('#gangfight');
ganggun=$('#ganggun');
gangknife=$('#gangknife');
blood=$('#blood');
document.write('<title>LOAUP</title>');
document.write('<center><h1>The life of an unlucky person</h1></center>');
document.write('<center id="start">Are you ready to play?</center>');
document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
$('#yes').click(function(){
$('#yes,#no').hide(function(){
$('#start').hide();
$('#main').show
});
});
$('#no').click(function(){
$('#yes,#no').hide();
$('#start').hide();
document.write('<center>Ok, come back another time then.</center>');
});
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
<img id='batman' src='/jquery/sprites/spriteBatman.png' />
<img id='car' src='/jquery/sprites/spriteCar.png' />
<img id='hobo' src='/jquery/sprites/spriteHobo.png' />
<img id='cop' src='/jquery/sprites/spriteCop.png' />
<img id='knife' src='/jquery/sprites/spriteKnife.png' />
<img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
<img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
<img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
<img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />
Edit:
Here's the example:
http://jsbin.com/ocowas/1
In your #main click function change
$('#main').show
to
$('#main').show();
Your variable list should be comma seperated not colon seperated. and you may also want to rename your variables to make them more obvious and easier to read/remember by prefixing with a $ sign. For example when you store a selector as a variable use
var $element = $('#element'),
$element2 = $('#element2'),
$element23 = $('#element23');
Further, the hide() function does not take negative numbers as you have used. Just use hide() for an instant hide, or hide(100) for fast, hide(2000) for slow.. check: http://docs.jquery.com/Effects/hide
To append html to your document without using document.write, you can store the html as a variable, then select the body tag, or any other tag and append/prepend or replace the html to that, for example.
$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);
The 'title' tag should only appear between the 'head' tags of your html document. Use a heading tag instead, 'h1' to 'h6'.
The html 'center' tag is also deprecated as far as I know. Try using 'span', 'p' or even 'div' instead.
I need to display on a webpage a div when a user clicks on a button.
Does someone know how to do it ?
My code so far :
<body onload ="init()">
<input type="button" value="Display the div tree" onclick="check();" />
<script ="text/javascript">
function check() {
// I'd like to display on the page the div tree
}
</script>
<div id = "tree" style="display:none"> // I don't want to display it unless the user clicks on the button "Display the div tree"
</div>
</body>
thanks,
Bruno
document.getElementById('tree').style.display='';
Include this in your check function
i'm not sure if i understood the question, this seems a bit too easy:
function check() {
document.getElementById('tree').style.display=''; // or display='block';
}
EDIT :
the reason this dooesn't work for you is an error in your code. please change this line:
<script ="text/javascript">
to
<script type="text/javascript">
and everything wiill be fine. also, you should place the script in the head of your document, but thats not absolutely neccessary.
here's an easy one (that I'm struggling with)! I have a textarea, a button, and an empty div. All I want to do is insert the updated contents of the textarea into the div onClick of the button. Here's what I've got so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_text() {
$("#preview").replaceWith( $("#editor").val() );
}
</script>
</head>
<body>
<form>
<textarea name="editor" id="editor">GrumbleCakes</textarea>
<input type="button" value="Preview" onclick="get_text();" />
</form>
<div id="preview"></div>
</body>
</html>
It works the first time you click the button... with the value that was in the textarea on page load ("GrumbleCakes"), but that's it. It won't work with any updated text.
You can set the innerHTML or text content of the preview div by using the html or text functions:
$("#preview").html($("#editor").val());
.replaceWith actually replaces the DOM element. So the div is removed and replaced with the text. Subsequent calls to the function will no longer find the div, since it's been removed.
I think you want to use
.html($("#editor").val()).
Both
$('#preview").html($("#editor").val())
and
$("#preview").text( $("#editor").val())
should work.
However, .html will allow anyone to inject html or javascript into your site leaving it wide open for cross-site scripting attacks...
jikes!!
man you are replacing div with the contents of the textarea. use this function instead:
function get_text(){
var t=$("editor").val();
$("#preview").text(t);
}