I have 20 iframes on one page and I am trying to prevent all of them loading at once. The iframes are generated by a shortcode, so it's not as easy as inputting the source URL onclick. Is there a way to do this once the iframe code has already been generated.
When #file-1 is clicked, I wanted to load the iframe in the wrapper #file-1-p
<h4 id="file-1" class="click files shadow">Seven Habits Profile</h4>
<section id="file-1-p" class="popup white big-shadow">
<div class="popup-wrapper">
<div class="ex purple shadow">
<div>
<span class="f-white">X</span>
</div>
</div>
<div class="ead-preview"><div class="ead-document" style="position:relative;padding-top:90%;"><iframe src="//docs.google.com/viewer?url=http%3A%2F%2Fyourroundtable.com%2Fwp-content%2Fuploads%2F7_Habits_Profile.pdf&embedded=true&hl=en" title="Embedded Document" style="width:100%; height:100%; border: none; position: absolute;left:0;top:0;"></iframe></div><p class="embed_download">Download [49.83 KB] </p></div>
</div>
</section>
Related
I am using this "Image Slider with Dots (pure JS)" codepen which works very well on the page by itself, but whenever I place it inside a div for example an "outer shell" the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that's how I ran into this issue of the carousel having zero height once it is placed inside another div.
Here is the HTML of the slider with my custom class "outer-shell" around it, which makes the slider have zero height:
<div class="outer-shell">
<!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
There's quite a bit of CSS and JS along with the HTML, I thought it would be easier to have it linked rather than pasting it here. "Image Slider with Dots (pure JS)"
I have spent a good amount of time using Chrome Developer Tools looking at the individual pieces of the slider (trying different overflow properties), and I think it comes down to the images have an absolute position, because when I deselect the css property the first image would show. I am not sure if the outer div is messing up the positioning of the page?
i think your .dots class have position: absolute; that is why it is shown inside your div without needed a height property and when you add height to outer-shell you can see images too.
<div class="outer-shell">
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
.outer-shell{
height: 100%;
max-width:80%;
margin:0 auto;
}
I have a view in my ASP.NET Core application.The view split into 2 div containers Left and right containers in the 1st container i load some stuff with java script Now in my seconded container i want to load a different website example http://example.com
<div class="page-container">
<div class="panel-container">
<div class="panel-left">
panel-left
</div>
<div class="splitter">
</div>
<div class="panel-right">
I want to load a website here (http://example.com)
</div>
</div>
</div>
You can use an iframe tag:
<iframe src="https://www.w3schools.com"></iframe>
I am trying to show an video by using click event, but the click event doesn't trigger.
Here is the code:
<div id="video-section">
<div class="radial-progress">
<div class="r-circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
</div>
<div class="inset">
<i class="fa fa-caret-right"></i>
</div>
</div>
<iframe src="//player.vimeo.com/video/92371445"></iframe>
</div> <!-- end video-section -->
And this is my jquery codes
$('#video-section .radial-progress').on('click', function() {
$('#video-section > iframe').show();
});
You can see my live example here, it doesn't works for showing video.
Updated: I fixed myself. What happened is when I put the code in the last js file, there is another js get errors so it can't load this code. I also added a little code to make it play when play button is clicked.
The overview: I'm using Bootstrap 3 as my CSS Framework, thus the content is organized using its container/grid system. The background animation consists of blue/green diagonal strips that basically zig zag with each other. The animated background sequence is using two images that are repeated vertically. Currently the animation background images are in their own container/divs. Essentially I'm trying to fit a number of containers with the content above the background container.
My goal is to have the animated background responsive to device size but also able to have content anchored to specific places on the page background/animation. Eventually I would like to have additional events triggered according to the mouse's y-axis position.
Originally I thought I could have the background in its own container then have the containers/div's that contained the content set to a higher z-index so it would be positioned above the background animation. As you can see from looking at the jsfiddle I can't get the contents containers to be positioned above the background animation. It gets pushed to the bottom of the page.
I'm wondering if I need to make the background in its own non bootstrap div while only the contents use bootstrap? I could use width: 100% and height: 100% but then I I'm not sure if I would be able to anchor/fix certain content to specific points in the page.
I'm open to any and all suggestions. Simply put I want to have the contents position correctly over the animated background while also allowing the page to be responsive to device size.
<body>
<div class="container">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
http://jsfiddle.net/bismarck611/jt2k4o6z/
I was able to solve the problem with a few code changes. Never figured out if it was possible to have two containers stacked over each other with different z-index's.
<body>
<div class="background-content">
<div class="bluestrip">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
<div class="bluestrip extra">
<img src="http://i59.tinypic.com/rt0txj.jpg" />
</div>
<div class="greenstrip">
<img src="http://i57.tinypic.com/auv6fb.jpg" />
</div>
</div>
<div class='container zindex'>
<div class="row">
<div class='col-md-2'>
<img src="http://s26.postimg.org/8jazgghop/largest_iphone_3_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
<div class='col-md-2'>
<img src="http://s26.postimg.org/c46uzom89/medium_iphone_2_of_3_14.gif">
</div>
</div>
</div>
</body>
The div that is holding the img's I changed the css class to the following:
.background-content {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
}
This allowed for the images to resize themselves according to screen size and fit below the page contents. Now I'm still able to use the bootstrap framework over my css animated background.
I've copied code from another page in my site that launches a video in a pop up window, but for some reason the code does not bring up the video on the new page.
However, I've taken the exact same code (except I cannot apply it to a DIV this time) and applied it to the P element, but it does not launch the video.
Here's my code:
<p onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;"><img class="top" src="/resource/uploads/left-navs/blue-camera.png" />
some text</p>
and I've taken it from the WORKING code:
<div onclick="javascript:launchActivity('C191D24F-9B1A-FB59-C4EE7E3257C019F4','video')" style="cursor:pointer;display:inline-block; margin-top:10px;">
<i>vid text launch<img border="0" src="/resource/uploads/PrebuildSNLO/text_arrow.png" style="padding-left: 3px;" /></div>
Thanks for taking a look.
The launchActivity function is using jQuery to search for an element on the page, which doesn't exist. There is an element on the old page with this id
C191D24F-9B1A-FB59-C4EE7E3257C019F4
I assume this is the video, so it will need copying to the new page.
<div class="videoPlayer" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" title="SN1 Common Core" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" videoendredirect="">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
I'm guessing you didn't copy this into your new page, from the original page:
<div videoendredirect="" video="http://d1by67ljd45m4v.cloudfront.net/media/C1920522-F3C9-DB50-3F3D3CC1CACC01B7.mov" id="C191D24F-9B1A-FB59-C4EE7E3257C019F4" class="ui-dialog ui-widget ui-corner-all ui-draggable ui-resizable videoPlayer" style="display: none; width: auto; min-height: 0px; height: 491.267px; visibility: hidden;" scrolltop="0" scrollleft="0" title="SN1 Common Core">
<div class="ui-dialog-content ui-widget-content">
<div style="background-color:white;">
<strong>Problem loading video..</strong></div>
</div>
</div>
The script you're trying to call is looking for an object with the ID of C191D24F-9B1A-FB59-C4EE7E3257C019F4. When it can't find it, it fails.