I have a JSP page with four tabs and a background image. I want that when I click one of the tab, a JSP function should be invoked that will only update the clicked tab contents not the whole page and background image. A similar example can be the Multiview control in ASP.NET
ASP.NET is not comparable to plain JSP. JSP is more comparable to "Classic ASP". If you're looking for the Java counterpart of ASP.NET(-MVC), look at JSF instead. PrimeFaces for example has a <p:tabView> component which I think is exactly what you're looking for.
In plain JSP, you'd need to bring in some JavaScript code to execute Ajax requests and manipulate the HTML DOM and some Servlet to return the necessary data. jQuery and maybe jQuery UI may be helpful in this.
With out your codes we are helpless..
Try the following code which changes the content image of a div to some other images on mouse over other divs. With some modifications it may reach up to your requirements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
Link to the question
Related
This question already has answers here:
Rails javascript only works after reload
(8 answers)
Closed 8 years ago.
I designed a website for a local charity and used a template I found on the internet to add some interest. When the files were all uploaded to the host server, none of the javascript elements will work. If you click on something, I can see in the address bar of my browser that the code is updating but I don't see the update on the web page until I click the refresh button.
I have never worked with Javascript before and I've tried to find an answer on the web in forums but haven't had much luck.
This is the top portion of my index.html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>the CR</title>
<meta name="keywords" content="running, walking" />
<meta name="description" content="5k race" />
<link href="cr_style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox2.js"></script>
</head>
This is part of the main body of text where clicking on an image should move to a different section:
<div id="main">
<div id="content">
<div id="home" class="section">
<div id="home_about" class="box">
<p>custom text here
</div>
<div id="home_gallery" class="box no_mr">
<img src="images/gallery/01.jpg" alt="logo" />
<img src="images/gallery/02.jpg" alt="Event Photo" />
<img src="images/gallery/03.jpg" alt="logo" />
<img src="images/gallery/04.jpg" alt="Event Photo" />
<img src="images/gallery/05.jpg" alt="logo" />
<img src="images/gallery/06.jpg" alt="Event Photo" />
</div>
<div class="box home_box1 color2">
<img src="images/about-01.jpg" alt="About Us" />
</div>
There are two links attached to images where the user is supposed to be taken to either a page about the race or about the sponsors.
When I click on the image, I see 'http://www.website.com/#about' in the address bar but the '#about' details do not load until I click the refresh button.
When I originally began customizing the template with our content, the javascript didn't always work. I would open the html file and save it as something else and it would work.
I'm under a lot of pressure by the charity to get this up and running ASAP. Do any members of this community have any suggestions?
Try this;
<img src="images/about-01.jpg" alt="About Us" />
Just add the filename before the #.
I have some images in my web page, and I want to display a pop up when the user hover the mouse near each image, and when the user move the mouse elsewhere, the pop up disappears
I see this functionality in a lot of site but I don't know how I can do it
I saw jquery UI but the dialog doesn't match to my goal
do you have any idea
I just tested that but no result :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
</script>
</head>
<body>
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
</body>
</html>
thank you
wrap image with relative container and put inside absolute container (popup), show him (display:block; from display:none;) onbly then wrap container is hovered. do not forget to set z-index for popup.
You need to use jQuery mouseenter and mouseleave functions:
<p id="hover1">
Hover here!
</p>
<div id="content" style="display:none">
Content here!
</div>
$("#hover1").mouseenter(function() {
$("#content").fadeIn('fast');
});
$("#hover1").mouseleave(function() {
$("#content").fadeOut('slow');
});
http://jsfiddle.net/SzgqR/
Documentation
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
Edit
Remember to include jQuery into your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I am trying to open a simple link in a new tab. I have tried searching on google, and stackoverflow but the result says, we need to change settings in browser. Is there a way to do the same using javascript?
Here is the sample script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function gotoNewtab(){
document.forms[0].target="_blank";
document.forms[0].method = "post";
document.forms[0].action = "http://www.google.com";
document.forms[0].submit();
}
</script>
</head>
<body>
<form name="frm">
<p> click the below link to open the page in new tab </p>
<p> <a href="##"
onclick="javaScript:return gotoNewtab();">
click here </a>
</p>
</form>
</body>
</html>
You don't need Javascript.
Just write
...
Write the following JavaScript code to open a new tab
window.open("http://www.targetdomain.com", '_blank');
If you want to use HTML to do it, write the following code:
Click here to open a new tab
The noopener noreferrer attribute is to make sure the new tab doesn't mess around maliciously with the tab that opened it.
This behaviour is up the the specific browser settings. If the IE settings are set to tab-usage, they may be used, unless you specify that the links should open in a new window.
I have iframe that cointains some javascript that should fire on body load,while iframe works fine when embedded on plain HTML page,when integrated in blogger HTML/javascript widget,javascript in iframe don't work..suggestions.Tried only in Firefox bc viruses and toolbars eaten IE?
Iframe Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function change() {
var text = "someaddress";
window.location = "http://something.com/fb2.aspx" + "?url=" + text;
}
</script>
</head>
<body bgcolor="#333333" onload="change()">
</body>
</html>
Code of HTML/javascript widget on Blogger Blog
<iframe scrolling="no" src="http://something.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
And sam iframe embedded in this plain HTML page executes javascript as it should
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Stats page</title>
</head>
<body>
<iframe src="fb.htm" runat="server" id="iframe1" width="500" height="500"></iframe>
</body>
</html>
Behind the scenes, it appears that the Blogger Widget/Gadget system is using a method of adding code to the DOM that precludes the execution of any JavaScript. Oftentimes, this can happen if content is added by appending it to the .innerHTML object. The DOM element is rendered, but any included JavaScript does not execute.
A workaround for this is outside the scope of this question, because it's a blogger issue.
The solution for you is to edit the Blogger template directly, and paste your IFRAME where you would like it to appear in the template itself. In other words, don't use a widget.
Below is a portion of my own Blogger Template with an iframe right before the closing body element:
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<!-- Iframe in template -->
<iframe scrolling="no" src="http://somedomain.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
<!-- Iframe in template -->
</body>
<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
I have an XHTML 1.0 Strict document in which I'm trying to make Shadowbox work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
console.log('Howdy there!'); // displays, so no JS error in Shadowbox.init
</script>
</head>
<body>
<p>
<a href="image.jpg" title="Howdy" rel="shadowbox">
<img src="image.jpg" alt="Click to zoom." />
</a>
</p>
</body>
</html>
This document is completely valid according to my Firefox extension.
For some reason Shadowbox seems to do nothing. When I click the image link, the browser just opens the image as usual. No box at all.
I've tried not loading JQuery and only load Shadowbox but that didn't help, so it's not JQuery's fault either. This is with Shadowbox 3.0b by the way. Any ideas?
EDIT: I just got thinking... Shadowbox does some internal magic to figure out the path to it. However, this page is completely static and loaded directly from file on disk. Could this be the problem? Looking in the DOM, I see that Shadowbox.path is correctly set to "file:///C:/..." so maybe not?
You need to have (nebo have to have) all directories from showbox.zip in the directory with the file showbox.js, because showbox adds other scripts to the page.