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.
Related
Ok. Here is what I do to change the image src of some list items in my body script. as default, these list items load a different image. WHat I try to do is to check for the text in my urlArray, and then set the image src to somethingelse.png. I think the folllowing loop which runs at the end of the body section changes the source, but it does not change the actual picture. How can I make sure that it changes the picture as well?
for (var i=0; i<urlArray.length; i++) {
var imgname = "listimg";
if (urlArray[i][1]==="fi"){
var currentname = imgname.concat(i);
if(document.getElementById(currentname) ) //check if element exists
{
document.getElementById(currentname).src= "write.png";
//for debugging; delete from production code.
console.log(document.getElementById(currentname).src); //should write "write.png" to console.
}
}
}
Thank you for your answers and comments, forgive me for being a rookie..
Also some li items from my html:
<li>
<a href="#" onclick="datasent(1);"><img src="mcicon.png" id="listimg0" alt="Gummy Bears" /><span id="test1score" class="ui-li-count">12</span>
<h2 id="testname0"> Test Name 0</h2>
<p id="testexp0">Test Explanation 0</p>
</a>
</li>
<li>
<a href="#dog" onclick="datasent(2);"><img src="mcicon.png" id="listimg1" alt "Min Pin" />
<h1 id="testname1">Test Name 1</h1>
<p id="testexp1">Test Explanation 1</p>
</a>
</li>
Looking at the samples you provide, the code only works at the end of the body element as it references elements loaded before the code executes. If you move the code to the top of the page it runs before the elements on the page exist as it runs immediately after the script is loaded.
In order to reference elements that have not loaded yet, in jQuery, you need to wrap any code in a DOM ready handler. In plain JavaScript you might have used the window.load event, but the jQuery one is smarter and runs as soon as the DOM elements have all loaded.
e.g.
$(document).ready(function(){
// Your code here
});
of the shorter version:
$(function(){
// Your code here
});
i have a javascript like this one
var funct = function(){
return {
init : function(data) {
this.sendRequest({
action : 'login'
});
},
login : function()
{
var parentDIV = $("#dnn_ctr450_HtmlModule_lblContent");
parentDIV.attr('href', 'https://webcenter.elendersolutions.com/webcenter/').trigger('click');
}
}
}
HTML CODE of this one.
<div id="dnn_ctr450_ModuleContent" class="DNN_HTMLContent">
<div id="dnn_ctr450_HtmlModule_lblContent" class="Normal">
<p></p>
<h2></h2>
<h2>
<a href="https://webcenter.elendersolutions.com/webcenter/" target="_self"> <-- how can i trigger this one?
<img width="188" height="40" border="0" src="/Portals/0/WebcenterSignin.gif" alt="Webcenter Login"></img>
</a>
</h2>
<h2>
<a href="https://rates.lsi-lps.com/">
<img width="188" height="40" border="0" src="/Portals/0/RateCalculatorSignin.gif" alt=""></img>
</a>
</h2>
<h2></h2>
<p></p>
</div>
what i'm trying to do is to trigger the link so it would function like i just click it manually.
For one thing, you aren't actually selecting the link correctly. Rather, you are selecting its parent div, and setting an href on the div. The target element of your function is what is in your jQuery object, in this case the div: $("#dnn_ctr450_HtmlModule_lblContent").
Instead, select the anchor link directly (it may be worth reviewing the jQuery docs for the attribute-equals selector and find:
var parentDIV = $("#dnn_ctr450_HtmlModule_lblContent");
var aLink = parentDIV.find("a[href='https://webcenter.elendersolutions.com/webcenter/']");
The second problem is that jQuery's click functionality won't allow you to follow links; you'll have to take advantage of the native html element's click method, as detailed in this SO post.
aLink[0].click();
Note that by doing [0] we are accessing the underlying DOM element, and so the method we're calling is not a jQuery method.
we can't do anything with it with JQuery. the only we can do is to progmatically do the redirection.
var href = parentDIV.attr('href');
window.location.href = href;
but with native javascript yes we can.
parentDIV.[0].click(); //where the index 0 returns the native DOM object.
but please be advised that for some reasons browsers doesn't want to trigger redirection from href link when triggered progmatically by javascript.
hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.
So this is the code that I have written. i have very little knowledge of jquery and just tried to write what I saw. I am sure their is an easier I run it once and it will work but after that it just stays the some for each click and does not call the function back up for the next click. I am having the same problem on another script that I have, I can't seem to call a function more than one time. One and done it what it seems to do. Any help would be much appreciated.
$.noConflict();
jQuery(document).ready(function ($) {
$("#scrollmenu");
$("#e_emd").click(function () {
$("#e_em").show();
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_vd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").show();
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_sd").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").show();
$("#e_l").delay(1200).fadeOut("slow");
});
$("#e_ld").click(function () {
$("#e_em").delay(1200).fadeOut("slow");
$("#e_v").delay(1200).fadeOut("slow");
$("#e_s").delay(1200).fadeOut("slow");
$("#e_l").show();
});
});
<!-- THIS IS USED MULTIPLE TIMES IN THE PAGE BEING USED ON FOR SCROLLING CONTENT -->
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
I have upoloaded the full page I am working on.
The site I am trying it on is here http://www.mac-av.com/test2/
What I am seeing is that I can't use an id more than once to call a function where i have
<div id="scrollmenu">|
<a id="e_emd" href="#Event_Management" class="panel">Event Management</a> |
<a id="e_vd" href="#Video" class="panel">Video</a> |
<a id="e_sd" href="#Sound" class="panel"></a>Sound |
<a id="e_ld" href="#Lighting" class="panel">Lighting & Staging</a> |
</div>
Multiple times on the same page
I am needing each image to change differently for every button that is clicked for ever category because of the scrolling that I have. I am doing this because when the page it on a computer with a low resolution the image will appear on the left side under the content window of the next category. So making this script was suppose to hide the images from it and only show the ones that are there for the category it is on, but also be able to see the other as it scrolls before they disappear.
It will work for the first set of buttons, but not afterwards. I am realizing that I can only call them once with the id, but instead of making a different script for each one, is there an easier way?
Could you put up a link to the page? If you could do this, I could debug it quickly. fadeOut will work more than once, so there must be something up with your on-page script and selectors.
Tips that might help in the meantime:
Be more verbose in your id names, it will help when looking back at your code or when other people look at it
Space things our properly when they are nested
You have a random $("#scrollmenu"); declaration at the top that isn't doing anything... you can get rid of that
You can make your code more DRY by making this into one function - pass it an array of all the selectors and the one you want to leave out, then on click loop through that array and if it matches the one you want to leave out, show it, if not, hide it. If you don't get what I mean here I can write an example.
A few things:
ids can only be used once per page
use CSS selectors and good markup to reduce the amount of code
use CSS to style your elements
jQuery can read element attributes, so take advantage of it.
<script type="text/javascript">
$(document).ready(function(){
// when any link inside scrollmenu is clicked
$(".scrollmenu a").click(function (e) {
// don't follow the link
e.preventDefault();
// find out which image to show
var target_id = $(this).attr('href');
// fadeOut all visible images inside .images that isn't the one we'll show
$('.images img').is(':visible').not(target_id).fadeOut("slow");
// show the target
$(target_id).show();
});
});
</script>
<div class="scrollmenu">|
Event Management |
Video |
Sound |
Lighting & Staging |
</div>
<div class="images">
<img id="e_em" src="images/eventmanage.png" width="1037" height="480" />
<img id="e_v" src="images/video.png" width="1128" height="480" />
<img id="e_s" src="images/sound.png" width="1011" height="480" />
<img id="e_l" src="images/light.png" width="1011" height="480" />
</div>
You could combine this with #JonH's method for more complicated sequences of animations.
I set up an example for you to further elaborate on my comment. http://jsfiddle.net/jMQhZ/11/
Clicking the first box will fire the #e_emd click event. If you click that again, nothing will happen because the function has nothing to do. If you click show all you'll see that all the divs are set back to normal. Now clicking the #e_emd div will run your function again.
Why are you using the $.noConflict(); ? Try removing that. Also try removing the $ from your ready function and using it instead of "jQuery", so it looks as follows:
$(document).ready(function () {
// blah blah
});
And yes, document.ready fires when it's loaded, but you are linking your ids to events, so they should be fine. Do you have any 3rd party controls or other ajax controls on this page?
I have an <iframe> control on my page and I want to change it's target url (the url of the page displayed in the iframe) by a click on a hyperlink. The problem is that the iframe doesn't update on the click. I'm pretty sure I'm missing something, but I don't know what:
<script type="text/javascript">
var source = document.getElementById("CurrentlySelected")
function change(u) {
if (source.getAttribute("src") != u) {
source.setAttribute("src", u);
document.location.reload(true);
}
}
</script>
<ul>
<li>Website 1</li>
<li>Website 2</li>
</ul>
<iframe id="CurrentlySelected" width="800px" height="600px" src="http://www.somewebsite.com"></iframe>
JS is not my forte, but I don't see a problem here... any ideas?
Another problem is that the background of the iframe isn't taking the same color of the website linked in its src attribute...
EDIT
The issue with the background color of the website in the iframe seems to be an issue with Google Chrome, anyone know about a fix?
When you write document.location.reload(true), you are refreshing the parent page, resetting the <iframe> to point to the original URL.
Remove that line; setting the src attribute will already reload the frame.
Also, you're calling document.getElementById before the <iframe> element exists; you should move the <script> block after the <iframe>.
Try this...
<ul>
<li>Website 1</li>
<li>Website 2</li>
</ul>
<iframe id="CurrentlySelected" width="800px" height="600px" src="http://www.somewebsite.com"></iframe>
<script type="text/javascript">
// now iframe is available...
var source = document.getElementById("CurrentlySelected")
function change(u) {
if (source.getAttribute("src") != u) {
source.setAttribute("src", u);
// NOT NEEDED: document.location.reload(true);
}
}
</script>
Is the problem your document.location.reload(true);? If you're changing the iframe's URL but then reloading the page that contains the iframe, the iframe's URL will be set back to the state of what's in the host page's HTML.