Hi I am working on a project that is based on asp and javascript. Also I am new to both programming languages.
I created a popup window that displays a video. When you hit its "close" button, the popup would close but the audio kept playing in the background.
With this code now my audio stops. But it leads to another issue.
So here is the code.
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
I created a javascript variable - to copy the 'iframe src' value to it.
<script type="javascript">
var addurl = document.getElementById('#pict').src;
</script>
Then for 'onclick' in my span, I empty the src (so that the audio stops) and re-add the above variable value back in the src.(so that the user can play the video again in the same session)
onclick= ""$('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
I dont think the 'addurl' variable is working correctly here. AS I can't play the video twice in the same session. Its blank the second time.
How can I add iframe (src) value inside a variable??
I would appreciate if I could get any help to solve this problem.
As mentioned in my comment above, you have an extra > that closes your <iframe> before you set you id, width, height and other attributes. You simply need to remove the extra > and all should be fine.
Simple Demo
<iframe> id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
^ - Remove this
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
It looks like you also have some extra quotes "" inside of your javascript and miscellaneous &s.
onclick= ""$('#pict').attr('src','');
^^ - Remove the quotes
onclick= $('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
^ ------ ^ --- ^^ - Remove the `'`s `&`s and quotes
$('#pict').attr('src',addurl);>
Well, it seems a bit confusing. You have some options here, so I give you a few pointers on how to understand the code better.
If you are working inside the page content, you can insert ASP code like this:
<p>lorem ipsum: "<% =my_value %>" is my value</p>
In your code, it looks, as if you are inside a script block, building a string:
<%
dim some_asp_variable
dim my_value
some_asp_variable = "<p>Lorem ipsum: """ & my_value & """ is my value</p>"
Response.write some_asp_variable
%>
Note, how you have to write double quotes to put one quote in the string. and use & to concatenate the strings.
The part you have given:
onclick= ""$('#pict').attr('src','');$('#pict').attr('src','"& addurl & "');"" >
is correct, but only if you are composing a string in ASP (the second option).
Related
I'm in a situation where I need a substitute for the " " (space) character when writing an <iframe> (without using the forward slash).
<iframe src="\\12341234">
Is there any creative or interesting ideas for getting something like this to work without any spaces at all?
Even better, is there a way to use an iframe like this:
<iframe>
iframecontentshere
</iframe>
Yes as long as you can also run JavaScript. This assumes it is the only iframe in the page:
<iframe></iframe>
<script>document.querySelectorAll('iframe')[0].src="\\12341234";</script>
But this seems dodgy.
Space characters in a URL should be encoded as %20.
<iframe src="data:text/html,<h1>I%20have%20spaces.</h1>"></iframe>
Though to be clear, in this case it isn't required.
The closest you can get to what you shown after is the srcdoc attribute.
<iframe srcdoc="
<h1>Some content</h1>
<p>Directly in the attribute.</p>
"></iframe>
If you wanted to get rid of absolutely all space characters, even the one between the tag name and the attribute, then you'd need to resolve on JS:
<iframe></iframe><script>document.querySelector("iframe").src="data:text/html,<h1>I%20have%20spaces.</h1>";</script>
To clarify - I've built a comment system that sanitizes all HTML and displays it as plaintext to prevent trolling, cross-site scripting, etc.
On top of that, I have javascript that runs after the page loads, and detects DIRECT links to Youtube and Imgur content, then builds the appropriate player/frame/tag to display that content.
Here is my example code:
<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg
https://www.youtube.com/watch?v=t-ZRX8984sc
</div>
And script:
$('.video').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});
$('.imgur').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');
});
I can get one to work without the other - however - running both on the same page invariably produces broken tags and links like this, depending on the order:
<iframe width="420" height="345" src="https:<img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>
Why won't my code differentiate between Imgur and Youtube and handle them separately? I'm new at Regex and cannot tell what I'm doing wrong. If anyone could sort me out I'd be grateful.
Your Imgur regex matches too many URLs, e.g.:
https://example.com
https://www.youtube.com/watch?v=foobar
https://imgur.com/foobar
Try using this regex instead: /(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g
I am attempting to use the MaterializeCSS tooltip in oder to display a youtube video. I have set the html attribute in the jQuery to 'true' and added the embedded iframe code into the data-tooltip attribute in the HTML.
I am having issues with the quotes inside of the html iframe code, they are preventing the tags from closing. I tried escaping the quotes with the " syntax but all that did was display the html text instead of actually running the code inside of the tooltip. I've tried single quotes outisde with double quotes on the inside and that only shows a small thin blank box. I'm assuming that means the html is running but not displaying anything. Does anyone know what the problem is?
jQuery
$('.test-tooltip').tooltip({
delay: 50,
html: true,
});
HTML
<a class="test-tooltip" data-tooltip="<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>"
You can add another div or element as the video container and add it to the popover as a return of a jQuery function.
jQuery:
$('.test-tooltip').popover({
delay: 50,
html : true,
content: $('#youtube_container')
}
});
HTML:
<a class='test-tooltip' data-placement='top' title="Title" href='#'>Click</a>
<div id="youtube_container" style="display: none">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
It should work.
I have a string that might contain one or more instances of a YouTube or Vimeo iframe. I am looking for a javascript function that searches through this string, detects the ID of the video in the iframe src, then replaces the existing instances of the iframe with an iframe wrapped in a div.
So input would be:
<p>Interesting text, great, fantastic.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EShfC-uhlv8" frameborder="0" allowfullscreen></iframe>
<p>Another great thing</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umiN04tPpl0" frameborder="0" allowfullscreen></iframe>
Output:
<p>Interesting text, great, fantastic.</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/EShfC-uhlv8?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>Another great thing</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/umiN04tPpl0?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
I have tried wrapping my brain around regexp, even with all the examples around I just can't seem to figure out how to do this.
Anyone have a solution?
Copy/pasting the work I am about to reference directly would get me in trouble, so hopefully an explanation of the methodology would be sufficient. ( If it's not, let me know. )
Assuming you have no idea of the names of the iframes, just plop down a getElementsByTagName(iframe) and then iterate over the resulting array with a loop that gathers all the info from the iframe, which you will use to create a replacement element using innerHTML. This replacement element will have you funky iframe wrapped in whatever you want. Finally, we use replaceChild(replacement, original) and you're set.
For example, here is how I create my replacement element:
var replacement = document.createElement("replacement");
replacement.innerHTML =
"<div class=iframe-container>"
+ "<iframe src=https://www.youtube.com/embed/EShfC-uhlv8?html5=1 frameborder=0 allowfullscreen></iframe>"
+ "</div>"
In simpler terms -- write the code as it would look in the .html file.
Another tricky thing you can do is adding IDs to all the elements and just going through them with getElementById, but it seems like a lot of extra work, unless you're the one developing the page and can just ID-entify the iframes.
Let me know how it goes! If anything is unclear, which would be understandable, considering the format I've written all of this in, just let me know and I will help.
PS: I know a lot of people here don't like innerHTML. They are all pansies.
I am new to learning js and having a problem with the following:
I have a custom block on my page that looks like this...
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
And a function in my script.js file that looks like this...
jQuery(function() {
jQuery(".toggleup").click(function(){
jQuery("#chat").slideToggle("slow");
jQuery(this).toggleClass("toggledown");return false;
});
});
The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:
javascript:window.close();
Which I have changed to:
javascript:window.parent.jQuery('.toggleup').click()
When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:
[object Object]
where my Iframe content should be.
What am I doing wrong?
I don't really get what you are trying to do :).
All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.
Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)
The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
However when calling the jQuery function like this...
javascript:window.parent.jQuery('.toggleup').click()
instead of clicking the link, the box would close as expected but the div and iframe are never created.
Instead I changed the following line in my custom block from...
<a class="toggleup" href="#">Live Support</a>
to...
<a class="toggleup" href="#" id="chatbtn">Live Support</a>
and called it using
parent.document.getElementById('chatbtn').click();
instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.
Hope it helps someone.
: