I have a div tag inside a table cell and and a hyperlink tag in another cell and on i want open a specific url onmouseover on hyperlink inside the div tag.the url is to my pdf file.Please anyone tell me how can i do this thorugh Javascript or anyother method
Something like this:
<table>
<tr>
<td>
google
</td>
<td>
<div id="div1" style="width:400px;height:200px;border:1px solid #ddd;"></div>
</td>
</tr>
</table>
<script>
function previewUrl(url,target){
//use timeout coz mousehover fires several times
clearTimeout(window.ht);
window.ht = setTimeout(function(){
var div = document.getElementById(target);
div.innerHTML = '<iframe style="width:100%;height:100%;" frameborder="0" src="' + url + '" />';
},20);
}
</script>
If you mean you want to open a new page on mouse over, then:
//add onmouseover to your hyperlink
<a href="#" onMouseOver="open_new_window(url);">Open Hover Window
//then js
function open_new_window(url) {
window.open(url,"some_name","width=300,height=200,left=10,top=10");
}
Did you mean something like that
Related
I'm using HTML, CSS and Javascript. My page is divided into two vertical columns. On the right side, I have buttons that, when clicked, do add a sentence on the left side. What I want to do is, when I click a button, the sentence on the left side is printed AND the content on the right side changes. I tried just making a new url, but it changes de content of the whole page.
EDIT: what I want to do is like the software (point of sales) that restaurants use. One side is the receipt, the other is where the waitress clicks on the food and beverages and they appear on the receipt.
This is what I have, but none of it is about the new change in the column content:
function artfato() {
var x = document.getElementById("myDIV");
x.innerHTML = "1 Fato"
}
<div class="row">
<div class="column" style="background-color:#bbb;">
<h3>Ticket nº1</h3>
<p id="myDIV"></p>
</div>
<div class="column">
<table id="table">
<tr>
<td>
<input type="button" value="Fatos" class="ixbt" onclick="artfato();">
</td>
<td>
<input type="button" value="Calças" class="ixbt" onclick="artfato();">
</td>
</tr>
</table>
</div>
</div>
It seems your code currently is changing the contents of id="myDiv". Not sure exactly what you're looking for, but you most likely want to append something to each or one of your columns instead of overwriting it.
I am not sure if you looking for that, but here we go.
First of all, change the "myDiv" from paragraph to div.
<div id=myDiv></div>
After this you can change the event function (artfato) to something as below:
var x = document.getElementById("myDIV");
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left = "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";
x.appendChild(makeIframe);
style.position = "relative";
makediv.style.overflow = "hidden";
Do not forget to set the position attribute relative and absolute, to maintain the iframe inside div.
If you want to get content from your own origin (domain/application), try this:
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
font: stackoverflow answer
Hi,
I need help with a class assignment. We were given an HTML file for a pretend business, "Castaway Vacations LLC". The first step in the assignment is to create a javascript function that changes the Text Color, Hyperlink Color, and Image when a particular link is clicked. So when the "Romantic" link is clicked, for example, the text that reads "Select Mood" will change to red, along with all other text on the page (including the other hyperlinks). Clicking this link will also change the image. One thing that's tricky about the file that our teacher sent is that there isn't a matching CSS file - I created one myself that contains the class colors, but besides that, all the other styles are inline, which I'm not used to. Here is the JSfiddle link to my code:
UPDATE!
I've gotten the code down for changing text color and image, but the hyperlink colors still aren't changing. You can see my attempt at changing them with the function named colorLinks in the updated javascript. Unfortunately, not only does this function not work, it's also causing the previous (good) functions to not work as well. Thanks for your help.
http://jsfiddle.net/HappyHands31/twkm12r2/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99
text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align="right" bgcolor=#ffffff>
<img src="castaway_logo.jpg">
<br>
<font face=arial>Vacations, LLC</font></td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
<tr>
<td width=300 valign="top">
<font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
<font face=arial>
<a id="one" href="#">Romantic</a><br><br>
<a id="two" href="#">Adventure</a><br><br>
<a id="three" href="#">Relaxation</a><br><br>
<a id="four" href="#">Family</a><br><br><br>
<br>
Request A Brochure...
</font>
</td>
<td align="center"><img id="original.jpg" src="orig_main.jpg">
<br> <i>Your Vacation Awaits!
</tr>
</center>
<script src="castaway.js"></script>
</body>
</html>
</DOCTYPE>
Javascript:
document.getElementById('one').addEventListener
('click', change_color);
document.getElementById('two').addEventListener
('click', change_color2);
document.getElementById('three').addEventListener
('click', change_color3);
document.getElementById('four').addEventListener
('click', change_color4);
function change_color(){
document.body.style.color = "red";
document.getElementById("original.jpg").src = "rom_main.jpg";
}
function change_color2(){
document.body.style.color = "blue";
document.getElementById("original.jpg").src = "adv_main.jpg";
}
function change_color3(){
document.body.style.color = "green";
document.getElementById("original.jpg").src = "rel_main.jpg";
}
function change_color4(){
document.body.style.color = "orange";
document.getElementById("original.jpg").src = "fam_main.jgp";
}
colorLinks ("#00FF00");
function colorLinks (hex)
var links = document.getElementsByTagName("a");
for(var i=0;i<links.length;i++)
{
if(links[i].href)
{
links[i].style.color = "red";
}
}
Thank you!
ok, for starters to change color of something you just need to do something like this
function change_color(){
document.body.style.color = "red"; // this will change the color of the text to RED
document.getElementById("image_to_change").src = "something.jpg"; // change img src
}
to use the function just add the call to the function where you want it, for example
<a onClick="change_color();" href="#">Romantic</a><br><br>
well, its already accepted answer, but just wanted to complete it, to change the img src of, first you need to add an id for that img, for example
<td align="center"><img id="image_to_change"src="orig_main.jpg"><br><i>Your Vacation Awaits!
after you added the id, you can see how i added this line to the "change_color" function
document.getElementById("image_to_change").src = "***SOURCE_TO_YOUR_IMAGE***";
* Working Code *
OK, here is the working fiddle http://jsfiddle.net/8ntdbek3/1/
i changed a few things to make it work, first, you need to understand that when you give an "ID" to something, in this case to the img (you gave the id "rom_main.jpg") the ID is what you need to use to call that element, so when you are using
document.getElementById("orig_main.jpg").src = "rom_main.jpg";
it should go
document.getElementById("rom_main.jpg").src = "rom_main.jpg";
since you gave it the id "rom_main.jpg" in this line, and the id "orig_main.jpg" does not exist!
<td align="center"><img id=**"rom_main.jpg**" src="orig_main.jpg"><br><i>Your Vacation Awaits!
also its important to note that you can put ANY id that you want, so repeating the name of the jpg file its something that i would not recommend, since it leads to confusion.
I changed the ID to something more readable and thats it. if you still need help comment below and i'll do my best to help you.
* EDIT to change color *
ok, finally i added a few lines of code to change the color of EVERY element in your page, for each onclick i adde these lines:
var list = document.getElementsByTagName("a");
for (i = 0; i < list.length; i++) {
list[i].style.color = "red";
}
as you can see, i get in a list every element with the tag "a", then every element i turn it into "red" (or the color you want).
here is the working fiddle http://jsfiddle.net/8ntdbek3/3/
regards.
I am new in JS,please help me.I have 4 images with the same class name and a hidden div which is displayed when one of 4 images is clicked. How i can add to my div the image which one is clicked? I do not want to write a function for every image.Is it possible with my code?
<img onClick="show()"class="img" src="css/images1/img1.png">
<img onClick="show()"class="img" src="css/images1/img2.png">
<img onClick="show()"class="img" src="css/images1/img3.png">
<img onClick="show()"class="img" src="css/images1/img4.png">
<div class="gallery"></div>
<script>
function show(){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML='<img src=css/images1/img1.jpg>';
};
</script>
Pass in the "src" of the element that was clicked:
function show(src){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML = '<img src="' + src + '">';
}
Then for your html <img/> tags pass in their src to show:
<img onClick="show(this.src)"class="img" src="css/images1/img1.png">
Edit: if you must select "gallery" by className, use getElementsByClassName as you originally had.
In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.
dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}
On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle
Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.
This should be easy but it's not working properly... I am quite rusty on javascript and can't figure out what it is I am missing.
I have a navbar that I'd like to disappear when person clicks on small arrow, leaving just a 2nd arrow. When user clicks on 2nd arrow, nav bar reappears. All of the navbar is in one tag. The nav menu itself is quite long, one reason, I want to give user ability to toggle it on and off.
Javascript function in head is as follows:
<script type="text/javascript">
function collapseMenu()
{document.getElementById("navbar").innerHTML ='<td id=navbar2><img src="arrow.gif"></td>';
}</script>
Text on page is:
<div id='navbar'>
<td>
<img src="arrow.gif">
</td>
</div>
Placing id in the div tag, it shows the arrow when you click on the link but doesn't remove the old html between the div tags. Same thing using span instead of div and no difference between single and double quotes. When I move the id="navbar" to the tag, the nav bar does disappear but it leaves the background color unchanged for the size of the old td tag. I would like it to go blank except for tiny arrow. So question 1 is why are div and span not working, or alternatively, td leaving background color in old space.
2nd question is how to specify innerHTM in text through a variable. It would be nice not to have to put this all in function in header.
Thanks for any ideas!
Don't know what a jsfiddle is but following code reproduces problem if put in .htm file. Thx.
<html>
<head>
<script type="text/javascript">
function hideBar()
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>';
}</script>
<script type="text/javascript">
function hideBar2()
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>';
}</script>
</head>
<body>
<table width=500>
id in td tag
<tr>
<td rowspan=3 bgcolor="yellow" id="navbar">
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
<table width=500>
id in div tag
<tr>
<div id="navbar2">
<td rowspan=3 bgcolor="yellow">
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide
menu</a><br>menu1<br>menu2<br>menu3<br>menu4
</td></div>
</tr>
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td>
</tr>
</table>
</body>
</html>
Following leaves one line of background expand gif. Moving the gif outside the div throws off cell alignment. Realize that tables are no longer considered best practice but redoing table structure of whole site would be large undertaking.
<html>
<head>
<script type="text/javascript">
function toggleBar(obj) {
var navbar = document.getElementById("navbar");
if (navbar.style.display == "none") {
navbar.style.display = "";
obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>";
} else {
navbar.style.display = "none";
obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>";
}
}
</script>
</head>
<body>
<body><table><tr><td valign="top">
<div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;">
<a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif"
alt="Hide Menu"></a>
<div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div>
</div>
<td valign="top"><table><tr style="background-color:blue;"><td><font
color="white">Title</font></td></tr>
<tr><td>Body Text</td></tr></table>
</body>