I am creating a Template Site, i want to change the content of the IFrame
based on the link clicked in javascript,
but the error i get is if i change the 'src' attribute of the iframe
the page gets reload.
So my question is
how to change iframe content without reloading the Page? below is my code
// HTML part
<li class="inside first">
HOME
</li>
<li class="inside">
PRODUCTS
</li>
<li class="inside">
SOLUTIONS
</li>
<li class="inside">
SERVICES
</li>
<li class="inside">
SUPPORT
</li>
<div id="mainContent">
<iframe
src=''
width="100%"
height="100%"
name='content'
id='content'>
</iframe>
</div>
//Javascript part
<script type="text/javascript">
var index=0;
var link_list= new Array('homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html');
var frame=document.getElementById('content');
frame.src=link_list[index];
function clicked(key)
{
// The following line is redirecting the page
frame.src=link_list[key];
return false;
}
</script>
Just write hrefs for those links and add attribute target="content".
This can be done w/o javascript at all.
Your link_list is wrong, JavaScript is case-sensitive, it's new Array(), not new array():
var link_list = new Array(...);
Use the array literal [] and you're fine:
var link_list = ['homepage.html','product.html','solution.html',
'services.html','support.html','event.html',
'partner.html','company.html'];
If you check your browser's JavaScript error console it's easy to find such errors:
[09:16:09.208] array is not defined # file:///.../temp.html:34
Related
I have the following code below, and I am trying to make it so that when a user clicks the text of a video streaming website they wish to watch the video from, it will update inside of the iframe.
<iframe src="<!-- Desired URL from a href should be here -->" height="240" width="100%">
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
How can I go about doing this in a way that can scale just from adding more <li> tags into our video-links ul class?
The fully working code:
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
<script>
function changeSrc(obj)
{
document.getElementById("myiframe").src = obj.href;
return false;
}
</script>
Now comes the explanation of the few edits I made to your code:
iframe tags must be closed, otherwise page will not appear correctly.
You must use JavaScript to modify the page dynamically.
You can write JavaScript functions in the script tag.
onclick is a callback, which is called when the user clicks on something in the page. We call the changeSrc function, passing this as parameter, because we want to pass the object which we are clicking.
We must return false, otherwise page will follow the link in the href attribute. There are alternatives to this, but I'm trying to be simple with my solution.
We assign an id to your iframe and get it to manage its properties, like src, so it can be set.
Here is some syntactical sugar added on to FonzTech's answer.
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li data-link="https://our-unique-url-for-this-title.com">YouTube</li>
<li data-link="https://our-unique-url-for-this-title.com">Vimeo</li>
<li data-link="https://our-unique-url-for-this-title.com">DailyMotion</li>
<li data-link="https://our-unique-url-for-this-title.com">Veoh</li>
<li data-link="https://our-unique-url-for-this-title.com">Crackle</li>
</ul>
<script>
// Get a NodeList of all li elements inside .video-links
let elements = document.querySelectorAll('.video-links li')
// Loop through each item in the NodeList
elements.forEach((el) => {
// Add a click event to each item
el.addEventListener('click', () => {
// Scrape the data-link attribute from the current li element
let link = el.attributes['data-link'].value;
// Set the iframe's src attribute
document.getElementById("myiframe").src = link;
});
});
</script>
Instead of using an anchor tag's href attribute for storing data, I suggest using custom data attributes as that is what they are made for. In addition to that you don't have to keep the browser from following the link.
This solution also doesn't use inline JS which some consider to be a "bad" or "messy" practice.
I'm not sure if this is possible or not.
I wanted to make a same header and footer but with different content pages. My current course only covers HTML, JS, CSS, and JQuery.
Here is my current body, simplified:
<div id="header">
<ul>
<li>Content One</li>
<li>Content Two</li>
</ul>
</div>
<div id="contents">
<object id="change" data="contentOne.html" type="text/html" height="100%" width="100%">
</object>
</div>
<div id="footer">
<p>The footer</p>
</div>
Inside the head are something like this:
<head>
<script>
function contentOne(){
document.getElementById("change").data = "contentOne.html";
}
function contentTwo(){
document.getElementById("change").data = "contentTwo.html";
}
</script>
</head>
The problem is, that I can't get the content to change. It looks like it would work but, for example, clicking on ContentTwo, doesn't load contentTwo. The page remains the same.
You shall use setAttribute for native JS or .prop for jquery:
function contentOne(){
// native
var element = document.getElementById("change");
element.setAttribute("data", "contentOne.html");
// jquery
$("#change").prop("data","contentOne.html");
}
Make sure you properly close the attribute values, height="100% width="100%> is wrong, also the object element shall be closed with </object> :
<object id="change" data="contentOne.html"
type="text/html" height="100%" width="100%"></object>
Hi i'm trying to get my tabs works by using javascript but face some problem in changing the div that contains the content.
these are my tabs, there are more but i will show 2 for example
<li id="sub1" class="moduleTabs">Practice
<ul class="collapse">
<li class="unselected">Principle</li>
<li class="unselected">Basics</li>
</ul>
</li>
Here is my div that contains the content
<div id="pro1" class="information">
<h2>Principles</h2>
<p></p>
</div>
<div id="pro2" class="information">
<h2>Basics</h2>
<p></p>
</div>
Here is my javascript code
$('#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #t13, #t14').parent('li').click(function () {
$(this).addClass('clicked');
$(this).siblings().removeClass('clicked');
//this part is to remove the content in homepage
$('#content').hide();
//i'm trying to get the url name #pro1 if link #t1 is click so that the div will fade in
$(this).find('a').attr('href').fadeIn();
$(this).siblings().find('a').attr('href').hide();
})/
The problem now i'm facing is $(this).find('a').attr('href').fadeIn() don't work.
i can't get the url link (#pro1) from the tabs that is selected.
The thing is that $(this).find('a').attr('href') returns you a string like "#pro1", "#pro2"... and not a jQuery object directly. You have to give this string to the jQuery function to get the corresponding element.
Change this :
$(this).find('a').attr('href').fadeIn();
To
$($(this).find('a').attr('href')).fadeIn();
In an unordered list i have some a's with some href's. When clicked I want some html from an external file written. I cannot use any server side languages since it only gonna be running localy.
The structure of my file is:
<body>
<ul>
<li><a href="#">item1</li>
<li><a href="#">item2</li>
<li><a href="#">item3</li>
<li><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
Thanks in advance
Since it looks like you're trying to load a script, there's a better way to do that, by using jQuery.getScript():
$('#triangle').click(function() {
$.getScript("js/triangle.js");
});
Also, as arieljuod points out, you haven't actually loaded jQuery in your HTML file. You'll need to do that to use it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
(Or pick your favorite jQuery version and CDN; this is one of many.)
You don't want document.write().
You probably want this instead, depending on where you want the new HTML to go:
$('head').append('<script src="js/square.js"></script>');
You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.
Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a
Pasting the content of the code editor here:
<body>
<ul>
<li id="item1" class="item"><a href="#">item1</li>
<li id="item3" class="item"><a href="#">item2</li>
<li id="item4" class="item"><a href="#">item3</li>
<li id="item5" class="item"><a href="#">item4</li>
</ul>
<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>
</html>
//JS
//convert some file content to html
var genHtmlContent = function(content){
//do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
return content.htmlContent;
}
//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
var selectedId = event.target.id;
var url = "http://www.mysite.com/" + selectedId + ".json";
$.get(url, function(content) {
var htmlContent = genHtmlContent(content);
$("#content").val(htmlContent);
})
})
//sample json file on server
//item1.json
{htmlContent: "<div>I am Item 1</div>"}
A quick and easy solution will be an iframe. Add as many iframes as you want, each having a different url. Give them a common class and hide them using CSS or jQuery. On clicking a link, prevent default and show the corresponding iframe, like;
<ul>
<li><a href="#" id="item1">item1</li>
</ul>
<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe>
</div>
and in your JavaScript, add this;
$('.iframes').hide();
$('#item1').click(function() {
event.preventDefault();
$('#iframe1').show();
});
While using jQuery Mobile <ul data-role="listview">, I am trying to add some <li>s from JavaScript, but the new <li> is not inheriting the jQuery Mobile styles. Here is the code:
<head>
<script>
function init()
{
msg = "<li> <a href=> New List Item </a></li>";
document.querySelector('#add_item').innerHTML += msg;
}
// call init on load
window.addEventListener('load',init,false);
</script>
</head>
<body>
<div id='main' data-role='page' data-theme='c'>
<div data-role='header'>
<h1>Welcome!</h1>
</div>
<div id='content' data-role='content'>
<ul data-role="listview" id="list_cars">
<div id="add_item">
</div>
<li> List Item 1</li>
<li> List Item 1</li>
</ul>
</div>
<div data-role='footer'>
<h4>Enjoy reading the book ...</h4>
</div>
</div> <!-- End of Min page -->
</body>
First, you're putting your <li> inside a <div> instead of directly inside the <ul>. Try changing your querySelector to...
document.querySelector('#list_cars').innerHTML += msg;
or, if you want the item at the top of the list, use this...
document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;
Then, you need to tell jQuery Mobile to update that list view by adding...
$('#list_cars').listview('refresh');
The last section on this jQuery Mobile Documentation page about lists describes this feature.
Working example here: http://jsbin.com/omepob/1/
To apply the properties on the new object, the optimal way is to call jQuery's refresh method for the object:
$("#myobject").listview("refresh");
However, I encourage you to replace this innerHTML call for something more DOM-atic, like:
var myli = document.createElement("li");
myli.appendChild(document.createTextElement("List Item 3"));
BTW, agreed with Travis; better include a "ul" as a parent of "li" instead of using a "div" there...