I have an embed tag on a site with an external source.
I'd like to hide a div on the external source that I'd like to hide.
The embed code is this:
<embed src="https://www.site.com" width='100%' height='1000px'/>
And the div has a class and inline style
<div class="button" style="display:block !important;">
Is it possible to hide with javascript or CSS?
I know that I can't do it with an iframe for security issues, is it the same with embed tag?
Or do I have other ways to do that?
First, define ID for both control as:
<embed id="embedID" src="https://www.site.com" width='100%' height='1000px'/>
<div id="divID" class="button" style="display:block !important;">
After that write below code:
$("#embedID #divID").remove();
Try this:
document.getElementsByClassName('button')[0].style.visibility='hidden';
This may help you.
Give the button an ID. For example: button1
<div class="button1" style="display:block !important;">
$("#button1").remove();
or
$("#button1").hide();
if you want to define multiple ID's at once, you can use:
$("#button1 #button2").remove();
or
$("#button1 #button2").hide();
Both should work!
For external links like you mentioned in the comments:
Using JQuery you should be able to exactly that with the load-function. Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.hmtl #container');
You can visit the JQuery documentation here for more info
Related
I have written my own js/jquery code for some of the content on my website. now same content is inside iframe but js/jquery only applied for content without iframe.
any way i can re use same code for both contents ?
example i want this to work for both
$( ".myclass-price-info" ).appendTo( $( ".myclass-single" ) );
Edit:
example: i have this on my page as normal html
<div class="test"> This is test div </div>
Then i have same div inside iframe like below
<iframe src="">
<html>
<body>
<div class="test"> This is test div </div>
</body>
</html>
</iframe>
this is only one div as an example i have full page with same example.
now i already wrote js/jquery to target my .test class and perform some js/jquery action. the js/jquery is working for normal html but not for iframe div. e.g i changed background of div its changed for normal html but not for div inside iframe.
If it's not cross domain:
$('#iframeid').contents().find('.myclass-single').append('.myclass-price-info');
I'm trying to build a pure css text link to video slider, within our Umbraco CMS.
I have very little movement on code I write as TinyMCE WYSIWYG will strip the majority of code out.
What I have done is created a base CSS slider and tried many click actions and the only one that seems to work is a standard HREF. So for example:
<!-- YouTube video - there's a few of these 'item*' -->
<div class="item slide-in" id="item0"> <iframe src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen="" width="410" height="231" frameborder="0"></iframe>
</div>
<!-- End YouTube video -->
<!-- The link to call the video 'item*' -->
Cat link one <br> <br> Cat link two
<!-- end link video 'item*' -->
The problem is that it has no option, but to work as a page anchor - which is really annoying me.
I'm not able to update anything else except the CMS interface. I've have capabilities to add JS in the head or footer of the document.
Visit the jsfiddle example
I can only add an onClick to an <a href... onclick=...>, but that still creates an on page anchor..
Any thoughts would be very much appriciated?
Switching an <iframe>'s src by an <a>nchor without any JavaScript is possible. Do the following:
Assign a name to <iframe>
Assign a target to <a> that value is name of <iframe>
Assign a href to <a> that value is the url of any valid youtube video.
Included suffix the url with autoplay=1 if you want video to launch once the button is clicked.
Styled the link to blend into a button, since anchors irritate you?
For some reason the videos aren't working in snippet, so for a live functioning example go to this PLUNKER
Demo
a {
text-decoration: none;
font-size:20px;
}
<button><a href="https://www.youtube.com/embed/RUlbTCjnX6E?ecver=1" target='yt'>1 Minute</a></button>
<button><a href="https://www.youtube.com/embed/1Wh8RzcQZr4?ecver=1" target='yt'>Cat Fails</a></button><br/>
<iframe name='yt' src="https://www.youtube.com/embed/1Wh8RzcQZr4?feature=oembed" allowfullscreen width="410" height="231" frameborder="0"></iframe>
I already made a photo gallery using a plugin which I want to show this gallery when user on_click my homepage button.
I am not sure how to achieve this please help me out here.
This is my button code:
<div class="ow-button-base ow-button-align-center">
<a class="ow-button-hover" target="_blank" id="introduction" onclick="intro_on">
<span>Click me to see gallery</span>
</a>
</div>
This is my photo gallery code:
<div class="huge_it_slideshow_image_wrap_1" style="max-height: 1800px; overflow: visible;">
<div id="huge_it_loading_image_1" class="display" style="display: none;"></div>
$('#introduction span').click(function(){$('#huge_it_loading_image_1').show();});
You could use the jQuery show() function:
$(".huge_it_slideshow_image_wrap_1").show();
but you need to set the display to none in your css file.
You do not need jquery for this simple task.
Input a script tag in the bottom of your document with some javascript code in it.
<script>
function intro_on() {
document.getElementById("huge_it_loading_image_1").style.display = 'block';
};
</script>
You also need to update the onclick in your html to "intro_on()" so it can be executed as a javascript function.
Given an html page with several anchors defined. Is there a way to show in tooltip part of this page between two specified anchors? And, how?
You can assume the html page is something like this:
<body>
<div>this is some text with tooltip when hovering</div>
<a name="a1"></a>
....
<a name="a2"></a>
....
<a name="a3"></a>
....
<a name="a4"></a>
</body>
So I want to hover on the div and see in the tooltip an html page between the two anchors a2 and a3.
The answer to this question gives a good way to show without using javascript, but just html and css. I would really prefer not using javascript, but please feel free to use it if that can greatly ease the task, and if you do so, please use no more libs other than jQuery.
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.