Grab Parts of HTML code using Javascript - javascript

As I'm a noobs on javascript, I need some help to figure out how to grab spesific part of html code using pure javascript.
I wanted to get this part :
6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR
From HTML code below :
<div id="document-container">
<div style="width: 304px; height: 78px;">
<div>
<iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
</iframe>
</div>
<textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ">
</textarea>
</div>
</div>
I do believe it can be done using document.getElementById or regex. I think i can do it using PHP, but i have no idea how to do it in javascript.

give that iframe some unique id to easily access it with javascript
do document.getElementById(the id you gave that iframe)
read the src attribute from that element
parse that k parameter (you could use some URL builder)

This snippet will get the value of the k param and log it in the console.
const
iframe = document.querySelector('iframe'),
url = iframe.getAttribute('src'),
regex = /k=(.*?)&/,
regexResult = regex.exec(url);
console.log(regexResult[1]);
<div id="document-container"><div style="width: 304px; height: 78px;"><div><iframe src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0"></iframe></div><textarea id="g-document-response" name="g-document-response" class="g-document-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div>

HTML:
<iframe id="myIframe" src="https://www.example.com/document/api2/anchor?k=6LfLgwgTAAAAAFgpAIOgNmfzKi5Ko2ZnNeIE2uLR&co=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbTo0NDM.&hl=en&v=r20170816175713&size=normal&cb=xksmil4x110" title="document widget" scrolling="no" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups allow-popups-to-escape-sandbox" width="304" height="78" frameborder="0">
</iframe>
AND JAVASCRIPT:
var iframeSrc = document.getElementById("myIframe").src;
var params = parseQuery(iframeSrc.replace(/^[^\?]+\??/,''));
function parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
alert(params.k);
Here whereas I included id property for your Iframe to map it easily. I got the parser from this site.
Let me know if this worked for you. btw, Sorry for the improper indentions.
ALSO Here is a jsfiddle: https://jsfiddle.net/xx6u9vq8/1/

Related

Javascript manipulate HTML string

I have a string like this:
<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/aff_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->
godaddy
Now I wanna to toggle some parameter into src attribute based on a javascript event.
please see the JsFiddle
To manipulate HTML in string create empty element and set it's content with string. Later do what you want.
var string = '<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/usr_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->';
$('input').change(function() {
var content = $('<div>');
content.html(string);
var iFrameSrc = content.find('iframe').attr('src');
if ($('#e1').is(':checked')) {
iFrameSrc += '&e1='+$('#e1').val();
}
if ($('#e2').is(':checked')) {
iFrameSrc += '&e2='+$('#e2').val();
}
content.find('iframe').attr('src', iFrameSrc);
$('#result').show().text(content.html().replace(/&/g, '&'));
});
#result {
margin-top: 50px;
background: #dcfffb;
color: #044f47;
padding: 10px;
font-size: 1em;
font-family: monospace !important;
text-align: left;
direction: ltr;
border: 1px dotted #9dd3cd;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="e1" type="checkbox" value="someValue1"/>
<label for="e1">firstParam</label>
</div>
<div>
<input id="e2" type="checkbox" value="someValue2"/>
<label for="e2">secondParam</label>
</div>
<div id="result"></div>

Change video of video tag on scroll

I have a video tag say
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source src="vid/1.mp4" type="video/mp4">
</video>
</div>
</div>
I want to change the video when page scrolls and each time div changes like fueled.com. Say I have six divisions like
<div id="first></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
When div 2 comes into view the video should change and when div 3 or 4 comes into view video should change again to something else. Here is my code which needs to be modified according to it.
$(window).scroll(function() {
var topDivHeight = $("#first").height();
var DivTop = $("#sixth").position().top;
var viewPortSize = $(window).height();
var triggerAt = 450;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
var test1 = (topDivHeight - viewPortSize) + 650;
var count = 0;
var number = jQuery.grep(mainTops, function(n, i) {
if (n < $(window).scrollTop())
{
count++;
}
});
$('.nav ul li a').css("color", "#fff");
$('.nav ul li a#nav'+count ).css("color", "#f60");
if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
$('.phone').css('visibility', 'visible').fadeIn();
if($(window).scrollTop() >= test1){
$('#phonevideo').html('<source src="vid/2.mp4" type="video/mp4">'); // tried using this method but its not working here. Some other method needed here.
}
} else {
$('.phone').fadeOut();
}
});
Try this code:
$('#phonevideo').find("source").attr("src", "https://www.w3schools.com/tags/movie.mp4");
$('#phonevideo').get(0).load();
You can change source attribute like $('#phonevideo').find("source").attr("src","videosource")
and after changing source you need to load video $('#phonevideo').get(0).load()
You cannot directly replace the HTML as you do using function .html(), accordingly to the HTML specification
Dynamically modifying a source element and its attribute when the
element is already inserted in a video or audio element will have no
effect.
But what you can try as suggested by the document is to change what is playing, just use the src attribute on the media element directly and use function .load();
A working example below:
var btn = document.getElementById('btn'),
player = document.getElementById('phonevideo'),
source = document.getElementById('src');
btn.addEventListener('click', function(event) {
player.pause();
source.src = 'http://html5demos.com/assets/dizzy.mp4'; // change video
player.load(); // load it
});
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source id="src" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<button id="btn" type="button">Change Video!</button>
Using jQuery as on your example (not tested):
var player = $('#phonevideo');
player.find("source").attr("src", "http://html5demos.com/assets/dizzy.mp4");
player[0].load();
I've optimized your code. I have added a class to your divs and used the data attribute. Here is a working jsfiddle.
<div class="phone" align="center">
<div class="phone-inner">
<video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
<source src="vid/1.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="first" class="view" data-vid-src="vid/1.mp4"></div>
<div id="two" class="view" data-vid-src="vid/2.mp4"></div>
<div id="three" class="view" data-vid-src="vid/3.mp4"></div>
<div id="four" class="view" data-vid-src="vid/4.mp4"></div>
<div id="five" class="view" data-vid-src="vid/5.mp4"></div>
<div id="six" class="view" data-vid-src="vid/6.mp4"></div>
To see some result I have added some css:
.phone {
position: fixed;
height: 200px;
width: 120px;
background: white;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -60px;
}
.view {
height: 500px;
}
#first {
background: red;
}
#two {
background: yellow;
}
#three {
background: green;
}
#four {
background: blue;
}
#five {
background: pink;
}
#six {
background: black;
}
And now the jQuery part.
function getCurrentElement(pos) {
var len = $('.view').length;
var i = 0;
var old_pos;
var ele_pos;
var old_ele;
var return_ele;
$('.view').each(function(){
i++;
offset = $(this).offset();
ele_pos = offset.top;
if(pos == ele_pos) {
return_ele = $(this);
return;
}
else if(ele_pos > pos && old_pos < pos) {
return_ele = old_ele;
return;
}
else if(ele_pos < pos && i == len) {
return_ele = $(this);
return;
}
old_pos = ele_pos;
old_ele = $(this);
});
return return_ele;
}
var old_ele = null;
$(window).scroll(function() {
var cur_pos = $(window).scrollTop();
current_element = getCurrentElement(cur_pos);
if(old_ele != null) {
if(current_element.attr('id') != old_ele.attr('id')) {
$('#phonevideo source').attr('src',current_element.attr('data-vid-src'))
}
}
old_ele = current_element;
});
I hope this code will help you. :)

Stop and Start Page Overflow / Ability to Scroll on Click

Background:
I created a (HTML,CSS, JS) lightbox using the tutorial here. When the lightbox overlay div is shown (when the button is clicked), I want to stop the scrollbar ability. That way, when someone is on the page looking at an image in the lightbox, they can't scroll to another part of the page. Then, when the lightbox is closed, the scrollbar ability is enabled again so they can scroll freely. I can't seem to find the right way to do that though.
I tried this:
$(document).css('overflow-y', 'hidden');
But nothing happened when I added it to my code. It was as if I never added it.
Question:
Is there a way to stop the page overflow ability when the lightbox is up and then re-enable it when it is closed?
Sorry if there is a simple answer. I'm new to JavaScript.
Javascript:
function startLightBox() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "block";
lb.style.display = "block";
}
function dismiss() {
var lbBg = document.getElementById("lightBoxBg");
var lb = document.getElementById("lightBox");
var screenTop = $(document).scrollTop();
var currentMid = $(document).scrollTop() + 250;
$('#lightBoxBg').css('top', screenTop);
$('#lightBox').css('top', currentMid);
lbBg.style.display = "none";
lb.style.display = " none";
}
CSS:
#lightBoxBg {
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
display: none;
background-color: #000000;
height: 100%;
width: 100%;
}
#lightBox {
position: absolute;
top: 50%;
left: 40%;
display: none;
}
HTML Body
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-lg-6">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button onclick="startLightBox()">Light Box</button>
</div>
</div>
</div>
<div id="lightBoxBg" onclick="dismiss()">
</div>
<div id="lightBox">
<img src="test2.png" />
</div>
</body>
Try this-
jquery
Use $("body").css("overflow", "hidden"); in startLightBox() function.
And use $("body").css("overflow", "auto"); in dismiss()function.
Javascript
Use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in startLightBox() function.
And use
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
in dismiss()function.
You need to modify the overflow for the selector html, body, you can't directly control document's css - document is not an element.
Here's an example:
var toggled = false;
$('.visible').on('click', 'button', function() {
toggled = !toggled;
$(this).text((toggled ? 'Enable' : 'Disable') + ' scrolling');
$('body, html').css('overflow', toggled ? 'hidden' : '');
});
body {
background-image: linear-gradient(to bottom, white, black);
height: 140vh;
position: relative;
}
.visible, .invisible {
position: absolute;
color: red;
}
.visible {
top: calc(100vh - 2rem);
}
.invisible {
top: calc(140vh - 2rem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible">Visible <button>Disable scrolling</button></div>
<div class="invisible">Invisible</div>

how to prevent loading previous data when refresh the window using mouse. (right click on the tab and select reload tab option)

I want to prevent load youtube video when window is refresh. by using keyboard F5 and browser refresh button it not loading. But when I right click on my window and select reload window option it loads previous youtube video.
Here is my code:
var temp1;
var temp2;
var temp3 = 0;
function showPlayer(id, iframe, src) {
if (temp3 != 0) {
$("#" + temp1 + "").addClass("hide");
document.getElementById(temp2).src = "";
}
$("#" + id + "").removeClass("hide");
document.getElementById(iframe).src = "https://www.youtube.com/embed/" + src + "?autoplay=1;controls=0&showinfo=0";
temp1 = id;
temp2 = iframe;
temp3++;
}
.a1{
position: relative;
height: 300px;
width: 400px;
overflow: hidden;
background-color: #ddd;
}
.yt-player{
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a1" style="">
<div id="b1" >
<iframe id="yt-1" class="yt-player" width="300" height="175" frameborder="0" allowfullscreen></iframe>
<br/>
<button onclick="showPlayer('b1', 'yt-1', 'fIHH5-HVS9o')">play video</button>
</div>
</div>

Iframe click with javascript doesn't work

I have this javascript code:
function start1(dis,www){
var visina = screen.availHeight;
var content = '<div id="showRtbn" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;background: #E81515;cursor: pointer; border-radius:5px; margin-left:-15px;"> <iframe src="https://domain.com/hotel/2" style="border:0px #FFFFFF none;" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div> <div id="rtb" style="width:100%; height:100%; opacity:0; position:fixed; box-sizing: border-box; left:0px; top:0px; z-index:99999999; display:none; background:rgba(0, 0, 0, 0.8)"><iframe src="'+www+'" style="border:0px #FFFFFF none;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb" style="background:#fff; cursor:pointer; top:15px; right:15px; z-index:9999999; position:fixed; border-radius:25px;"><img style="width:50px; height50px;" src="http://i.imgur.com/QqlcQwu.png"></div></div>';
var newNode = document.createElement("DIV");
newNode.innerHTML = content;
document.body.appendChild(newNode);
var rtb = document.getElementById("rtb"),
timer = null;
document.getElementById("showRtb").addEventListener("click", function() {
if (rtb.style.opacity != 1) {
clearTimeout(timer);
rtb.style.display = "block";
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity + .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") >= 1) {
clearInterval(timer);
}
}, 30)
}
});
document.getElementById("hideRtb").addEventListener("click", function() {
if (rtb.style.opacity != 0) {
clearTimeout(timer);
timer = setInterval(function() {
rtb.style.opacity = +rtb.style.opacity - .10;
if (+getComputedStyle(rtb).getPropertyValue("opacity") <= 0) {
rtb.style.display = "none";
clearInterval(timer);
}
}, 30)
}
});
}
and as you can see, I create a link inside the body with id showRtb and inside that an iframe with content, but when I click it doesn't work, doesn't want to show div with id rtb ...
When I change the content so instead of an iframe I post an image, then it works well, but now with the iframe it doesn't work. Why? What is the problem?
So, I want when I click on showRtb to open div with ID rtb ...
UPDATE:
var content = '<div id="showRtb1" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 9999999;cursor: pointer; border-radius:5px; margin-left:-15px;"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="showRtb" style="position: fixed;text-align:center;left: 0px;width: 225px;height: 80px;top: 50%;z-index: 99999999;cursor: pointer; opacity:0; pointer; border-radius:5px; margin-left:-15px;"></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Change this:
var content = '<div id="showRtbn"> <iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div><div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
To be something like:
var content = '<div id="showRtbn"><iframe src="https://domain.com/hotel/2" name="myiFrame1" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe></div>Show RTB<div id="rtb"><iframe src="'+www+'" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe><div id="hideRtb"><img src="http://i.imgur.com/QqlcQwu.png"></div></div>';
Remove the iFrame from within the anchor tags (<a>..</a>) and you can set its containing <div> as hidden. NOTE: I've removed your styles. You should consider moving them into a stylesheet
JS:
document.getElementById("showRtb").addEventListener("click", function() {
rtb.style.display = "block";
console.log("clicked");
});

Categories

Resources