I am trying to get one link to open in a certain div.
When click on Jump link I need open the link on div id="container" and replace the image on the div with the webpage.
I have tried this code without success.
How to do resolve this?
Can you help me?
Thank you in advance for any help, really appreciated.
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script>
function finish(){
document.getElementById("loading").style.visibility = "hidden";
}
$(document).ready(function () {
$('input[readonly]').on('keydown', function (e) {
if (e.which === 8) {
e.preventDefault();
}
});
});
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
});
</script>
<ul class="sub_menu">
<li><a name="#container" href="http://...">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
#EDIT01
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu"">
<li><a name="#container" href="http://..." target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="image">
<img src="images/Logo.jpg" />
<iframe name="content" style="border:none;">
</iframe>
</div>
Why not use iframe?
function showPanel() {
document.getElementById('image').style.display = "none";
}
<ul class="sub_menu">
<li><a name="#container" href="www.example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="container" >
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" id="image">
<iframe name="content" style="border:none;">
</iframe>
</div>
Answer for edit #1: Your edit #01 is not working because you are hiding the entire div by id "image". Change div id to another name.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showPanel() {
document.getElementById('image').style.display = "none";
}
</script>
<ul class="sub_menu">
<li><a name="#container" href="example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>
<div id="images">
<img src="images/Logo.jpg" id="image" />
<iframe name="content" style="border:none;">
</iframe>
</div>
You can create iframe on the fly and place it inside container div.
$('.sub_menu').on('click', 'li > a', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('#container').html('<iframe class="myiframe" src="'+url+'" />');
})
.myiframe{border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub_menu">
<li><a name="#container" href="/questions">Jump</a></li>
</ul>
<div id="container" >
<img src="images/Logo.jpg" />
</div>
Related
I'm trying to create a basic slideshow so when you click the thumbnail in the nav the main image changes to that one. I have a JS function running in my head and when i click a thumbnail that image replaces the main image for a fraction of a second, before being reset. I'm really new to coding so i'd appreciate any help given!
``` <head>
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<title>Gem Website</title>
</head>
<body>```
```<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='gem 4-3.jpg'>
</div>
</div>
</div>```
```<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-3.jpg');">
<img class="img-thumb" src="gem 4-3.jpg">
</a>
</li>
<li class="nav-list">
<a href="" onclick="changeImage('gem 4-4.jpg');">
<img class="img-thumb" src="gem 4-4.jpg">
</a>
</li>
</ul>
</div>
<body>```
From your code, it looks like your thumbnails and the image your are supposed to be replacing are the same. What you see is just a flicker when you set the new src, but the image source is the same.
The issue is happening because of the a tag must be reloading the page on click.
Here is a solution without the a tag or if you want to keep the a tag in check out preventDefault() on an <a> tag
<script type="text/javascript">
function changeImage(element) {
document.getElementById('imageReplace').src = element;
} </script>
<div class="container">
<div class="row" id="mainContent">
<div id="img-div">
<img id="imageReplace" src='https://via.placeholder.com/150/0000FF'>
</div>
</div>
</div>
<div id="side-nav">
<ul class="nav-ul" id="style-1">
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/0000FF');">
<img class="img-thumb" src="https://via.placeholder.com/150/0000FF">
</li>
<li class="nav-list" onclick="changeImage('https://via.placeholder.com/150/FF0000');">
<img class="img-thumb" src="https://via.placeholder.com/150/FF0000">
</li>
</ul>
</div>
thi is javascript code to show another html file inside index.html
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
but how to make when i click example header to show just content of header.html or if i click footer to show just footer.html
<li><span>Header</span></li>
<li><span>Footer</span></li>
Here's an example:
HTML
<ul id="nav">
<li>
<a href="header.html" data-container="header">
<span>Header</span>
</a>
</li>
<li>
<a href="footer.html" data-container="footer">
<span>Footer</span>
</a>
</li>
</ul>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
JavaScript
$(document).ready(function() {
$('ul#nav li a').on('click', function() {
var el = $(this);
$('#' + el.data('container')).load(el.attr('href'));
return false;
});
});
Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});
Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle
Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>
Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.
Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example
const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle
I fund a toggle code that works perfectly, but I'd like to add a speed effect to slow it down a bit it when opening and closing. I did try to insert this code on it <p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p> instead of <h1>OPEN</h1> but without success.
I've a joomla website, some plugins use jquery. It seems that Jquery could do the trick with something like .toggle( [duration ] [, complete ] ) I've seen that JQ is a "Javascript's library", so it should work with the code bellow but no idea how I should insert it. I don't know if "simply" adding jquery code inside the code below would work, or if I should add something else in the FTP website some XX.js files (as I have seen in some tuto). I'm lost...
<script type="text/javascript">
// <![CDATA[
function toggle(id, link) {
var elem = document.getElementById(id);
var text = document.getElementById(link);
if (elem.style.display != "none") {
elem.style.display = "none";
text.innerHTML = "show";
} else {
elem.style.display = "block";
text.innerHTML = "hide";
}
}
// ]]>
</script>
<ul>
<li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
<div id="toggleText" style="display: none;">
<h1>OPEN</h1>
</div></li>
<li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
<div id="secondText" style="display: none;">
<h1>OPEN</h1>
</div></li>
</ul>
thanks!
Since you are using jquery make some minor changes to the mark up for ease of use
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
Then
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
Demo: Fiddle
for joomla :
1/ add in the index.php just after the tag this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript"></script>
2/ create in the ftp a file called app.js and write in it:
var $j = jQuery.noConflict();
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
3/ in the article source code :
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
Hey , I tried to make a hide/show toogle for my site. And change the link color.
I know the prob is the input.
The linkcolor goes on the divs. Not on the link.
Maybe anybody have an good idea.
Think i need a new function. (jquery is on) maybe a shorter way is possible.
Thanks in advance!
//javascipt
function toggleMe(a){
var e=document.getElementById(a);
var col=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
col.style.color="#000000"
} else {
e.style.display="none"
col.style.color="#000000"
}
return true;
}
//input
<div id="topp">
<div id="tops">
<li> Serien</li>
<li>Architektur</li>
<li >Portrait</li>
<li>About Me</li>
<li>Kontakt</li>
<li>Impressum</li>
<lie><span class="Stil1">Su</span>terrain.de</li></div>
</div>
</div>
//divs
<div id="about" style="display:none" onclick="hideBox('about');">
Lutz Bartelt<br />
About
</div>
<div id="kont" style="display:none" onclick="hideBox('kont');">
Lutz Bartelt<br />
<br />
01522386174<br />
WhiteWall<br />
</div>
<div id="imp" style="display:none" onclick="hideBox('imp');">
impress
</div>
Well, I've adapted your html:
<div id="tops">
<ul>
<li>Serien</li>
<li>Architektur</li>
<li>Portrait</li>
<li>About Me</li>
<li>Kontakt</li>
<li>Impressum</li>
<li><span class="Stil1">Su</span>terrain.de</li>
</ul>
</div>
<div id="panels">
<div id="about">
Lutz Bartelt<br />
About
</div>
<div id="kontakt">
Lutz Bartelt<br />
<br />
01522386174<br />
WhiteWall<br />
</div>
<div id="impressum">
impress
</div>
</div>
And the following jQuery seems to do what I think you're trying to do:
$('#tops > ul > li > a').click(
function() {
var showThis = $(this).attr('name');
$('.active').removeClass('active');
$(this).addClass('active');
$('#panels > div').hide();
$('#' + showThis).show();
return false;
});
I used an 'active' class-name for the color changing, which in the demo is defined in CSS as:
.active {
color: #f00;
font-weight: bold;
}
JS Fiddle demo of the above.
You forgot to pass the link object so there was no way for you to actually change the color of it:
function toggleMe( div, link )
{
var e = document.getElementById( div );
if( !e ) return( true );
if( e.style.display == "none" )
{
e.style.display = "block";
link.style.color = "red";
}
else
{
e.style.display = "none";
link.style.color = "blue";
}
return( false );
}
<div id="topp">
<div id="tops">
<li> Serien</li>
<li>Architektur</li>
<li >Portrait</li>
<li>About Me</li>
<li>Kontakt</li>
<li>Impressum</li>
<lie><span class="Stil1">Su</span>terrain.de</li></div>
</div>
</div>
//divs
<div id="about" style="display:none" onclick="hideBox('about');">
Lutz Bartelt<br />
About
</div>
<div id="kont" style="display:none" onclick="hideBox('kont');">
Lutz Bartelt<br />
<br />
01522386174<br />
WhiteWall<br />
</div>
<div id="imp" style="display:none" onclick="hideBox('imp');">
impress
</div>
Edit: You may also want to return false at the bottom of the function so the URL isn't actually followed.