How do I extract the iframe name with vbscript? like for example if my string value is
<DIV style="MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px" id=TB_window><DIV id=TB_title> <DIV id=TB_ajaxWindowTitle>Add Media</DIV> <DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href="#" jQuery172014112867239284427="140"><IMG src="http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png"></A></DIV></DIV><IFRAME style="WIDTH: 670px; HEIGHT: 180px" id=TB_iframeContent onload=tb_showIframe() src="http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME></DIV>
Then the extracted value would be TB_iframeContent656
I attempted to write the code in vbscript but it doesn't work
<script type="text/vbscript">
box="<DIV style=""MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px"" id=TB_window><DIV id=TB_title> <DIV id=TB_ajaxWindowTitle>Add Media</DIV> <DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href=""#"" jQuery172014112867239284427=""140""><IMG src=""http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png""></A></DIV></DIV><IFRAME style=""WIDTH: 670px; HEIGHT: 180px"" id=TB_iframeContent onload=tb_showIframe() src=""http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&"" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME></DIV>"
data = box.document.getElementById("TB_iframeContent").name
document.write(data)
</script>
There are two things wrong with your code:
A string object doesn't contain a value/method named document.
When you execute it like this the code will be executed before the document is created so stuff like the iframe won't exist yet, so obviously such an element can't be found.
Look at the code below for a working example. First of all it will look at the actual page instead of a string. The WindowLoad function makes sure the page is loaded before executing the code.
<html>
<head>
<script type="text/vbscript">
Set window.onload = GetRef("WindowLoad")
Function WindowLoad
Dim somediv
Set somediv = document.getElementById("someid")
Dim data
Set data = document.getElementById("TB_iframeContent")
if data Is Nothing then
MsgBox("element does not exist")
else
somediv.InnerHTML = data.name
end if
End Function
</script>
</head>
<body>
<!-- Some ID for testing purposes -->
<div id="someid"></div>
<!-- The DIV with the iframe -->
<div style="MARGIN-TOP: 0px; WIDTH: 670px; HEIGHT: 210px; VISIBILITY: visible; MARGIN-LEFT: -335px; TOP: 48px" id=TB_window>
<div id=TB_title>
<div id=TB_ajaxWindowTitle>Add Media</DIV>
<DIV id=TB_closeAjaxWindow><A id=TB_closeWindowButton title=Close href="#" jQuery172014112867239284427="140">
<IMG src="http://www.gorgeoushentai.com/wp-includes/js/thickbox/tb-close.png"></A>
</DIV>
</DIV>
<IFRAME style="WIDTH: 670px; HEIGHT: 180px" id=TB_iframeContent onload=tb_showIframe() src="http://www.gorgeoushentai.com/wp-admin/media-upload.php?post_id=168&" frameBorder=0 name=TB_iframeContent656 hspace=0>This feature requires inline frames. You have iframes disabled or your browser does not support them.</IFRAME>
</DIV>
</body>
</html>
Related
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
I am working on a project. How can I use Javascript to reveal a centered image when clicking inside a box without using a button?
Like this you mean? I used javascript a little, but it works!!!
<!DOCTYPE html>
<html>
<body>
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetter()" id="one"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="xSignDisplayLetterVerTwo()" id="two"></div>
<br />
<div style="background-color: red; width: 50px; height: 50px;" onclick="revealImg()" id="image"></div>
<script>
function revealImg() {
document.getElementById("image").innerHTML = "<img src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetter() {
document.getElementById("one").innerHTML = "<img src='https://image.freepik.com/free-icon/x-symbol_318-1407.jpg' alt='Image' style='width: 50px; height: 50px;' />"
}
function xSignDisplayLetterVerTwo() {
document.getElementById("two").innerHTML = "<img src='https://d3qdvvkm3r2z1i.cloudfront.net/media/catalog/product/cache/1/image/1800x/6b9ffbf72458f4fd2d3cb995d92e8889/n/o/nope_newthumb.png' alt='Image' style='width: 50px; height: 50px;' />"
}
</script>
</body>
</html>
If you don't know javaScript a little, then there are js tutorials all over the web.
W3Schools is a good idea for short-term tutorials that teach you a lot, and is relatively fun to mess around with.
CodeCademy is a good long-term full code tutorial that will take a few weeks to learn but helps a million via your coding skill. You will need to sign up but it's free and saves all your work (code) when you're done.
You should load the image in your HTML and hide it using a CSS class like hidden. Then you will want to use addEventListener to run a function when the image is clicked, which toggles the visibility of the image. The centering of the image can also be done using CSS.
const blocks = document.querySelectorAll('.block');
blocks.forEach((block) => {
block.addEventListener('click', () => toggleVisibility(block.querySelector('img')));
});
function toggleVisibility(el) {
el.classList.toggle('hidden');
}
.container {
display: flex;
}
.block {
background-color: red;
padding: 10px;
}
.hidden {
display: none;
}
<div class="container">
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
<div class="block">
<img src="https://www.placehold.it/150x150">
</div>
</div>
add an onclick attribute to your boxes that calls a function that shows a hidden image.
<div onclick="showImages()"></div>
you can add onclick listener to div and in onclick function you can change div's class
<div class="redbox" id="box" onclick="showImage()"></div>
showImage(){
var box =document.getelementbyid("box").
box.classList.remove("redbox");
box.classList.add("image");
}
below codes are to display loading gif while ajax is loading data. The codes below displaying the gif for the whole page of my browser. But I want it to display only at div-Summary-Report. Is it able to do this?
<div class="row">
<div class="col-lg-12 div-Detailed-Report">
//some content
</div>
</div>
<div class="row">
<div class="col-lg-12 div-Summary-Report">
//some content
</div>
</div>
<style type="text/css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../../Content/kendoui/Bootstrap/loading_2x.gif') center no-repeat #fff;
}
</style>
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$(".se-pre-con").show();
}).ajaxStop(function () {
$(".se-pre-con").hide();
});
});
//some ajax function
</script>
This is would solve your problem. Place loading gif inside div hidden and when ajax starts show gif and when ajax complete hide gif again.
<div class="row">
<div class="col-lg-12 div-Summary-Report">
<img src="loading.gif" class="loading">
//some content
</div>
</div>
<style type="text/css">
.loading{display:none;}
</style>
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
Hi i was trying to make a proof of concept for my metro style app.
this is my code:
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body style="height: 600px">
<div id="wrapper" style="width:10000px">
<div class="child" style="float: left; width: 200px; border-style: solid;">Left Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Middle Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("#wrapper").wrapInner("<table cellspacing='30'><tr>");
$(".child").wrap("<td></td>");
document.documentElement.onmousewheel = function (event) {
$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
};
});
</script>
The mousewheel event is working fine in IE10 (windows 8), so i created a html5 javascript metro style application containing just 2 files: default.html file with the above code and the jquery.min.js file.
When running the application i had the same display but horizontal scrolling was not working when using mousewheel like it worked in ie 10.
Note: mousewheel event is captured in Metro (put a breakpoint on this row "$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);" but this is not scrolling.
What is the problem with metro and is there any other way to make the horizontal scrolling.
Thank you
You're almost there. Use .win-horizontal instead of your #wrapper. This worked for me.
Found the answer at: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/3b4e4ffa-3d27-4d34-810b-03311fac03e8
Thank you Juliana Peña.
Actually with the code you have showing all I did was add event.preventDefault(); to stop the default vertical scrolling.
<script type="text/javascript">
$(document).ready(function() {
$("#wrapper").wrapInner("<table cellspacing='30'><tr>");
$(".child").wrap("<td></td>");
document.documentElement.onmousewheel = function (event) {
$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
event.preventDefault();
};
});