Here is fiddle example of something I would like to do. I want to mouse over element that is inside iframe (same domain) and then change color of the font. Like in example.
But in my version first the iframe is created after I push the button - my fiddle example. In my example mouseover wont work and I do not know why. I am not that experienced with JavaScript and can not figure it out on my own. Maybe what I want to do cannot be done or maybe I'm just missing something out.
function load_iframe(callback) {
$('#iframe').append('<iframe class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');
})
return iframe
})
iframe.on('mouseover', 'b', function() {
$(this).css('color','red');
});
What I have done so far: Fiddle
this is simple code i hope to help you .... i am edit your code
var iframe
var a
function load_iframe(callback) {
$('#iframe').append('<iframe id="1a" class="ajax" scrolling="no" style="height:190px" src="http://fiddle.jshell.net/38g2pyxh/"></iframe>')
$('.ajax').load(function() {
callback(this);
});
}
$(document).on('click','#create',function(callback){
load_iframe(function(){
iframe = $('iframe.ajax').contents()
iframe.find('body').prepend('<b id="bb">This is a test</b><br><b>Click here</b>');
a=document.getElementById('1a').contentWindow.document.getElementById('bb')
alert('pass')
a.onmouseover=function(){
a.style.color="red"
}
a.onmouseleave=function(){
a.style.color="black"
}
})
return iframe
})
Related
I want the html to open when the password is right and I have tried .js, document.write, .html, href, div, document.getElementById and nothing is working when it's inside the if condition but I need it in there so it opens when the condition is right.
<script>
function 123()
{
var pass=document.getElementById("pass").value;
if(pass=="password")
{
alert("Logged In");
here is where the HTML code should go;
}
}
</script>
You can create the html element in this page and give this element display none and when the password is correct change display example:
if(pass=="password") {
alert("Logged In");
document.getElementById("page").style.display="block";}
I have a Html page which has anchor tag, I Need to remove certain style applied already in html page for anchor tag while the html page is opened throw Iframe.
HTML Content as below:
<html>
<body>
<div>some content<a href="http://www.website.com" name="test1"/> some content </div>
</body>
</html>
I tried as below:
a[name^="test1"]:before{
content:"[prefix text]";
display:inline;
color:red;
}
a[name^="test1"]:after{
content:"suffix text";
display:inline;
color:green;
}
iframe a[name^="test1"]:before{
display:none;
}
iframe a[name^="test1"]:after{
display:none;
}
But inside "iframe" also these styles has been applying.
You have to first detect if your page is rendered inside an iframe and in that case apply an alternative CSS. It' can't be done with vanilla CSS then it has to be done with some JavaScript:
<script type="text/javascript">
function getTopWindow() {
try {
return window.top;
} catch {
// If we can't access window.top then browser is restricting
// us because of same origin policy.
return true;
}
}
function isRendererdInFrame() {
// If top window is null we may safely assume we're in iframe
return window.self !== getTopWindow();
}
function loadCss(location) {
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
} else {
var styles = "#import url('" + location + "');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
}
</script>
Code to load CSS from JavaScript is from How to load up CSS files using Javascript?.
With all that code you may simply write (even just after that inside <script> block):
var cssToLoad = isRendererdInFrame() ? "iframe.css" : "not-iframe.css";
loadCss("http://server/" + cssToLoad);
Of course same technique can be applied to patch CSS with iframe specific styles:
if (isRenderedInFrame())
loadCss("http://server/iframe-patch.css");
i dont know how to detect if page is opened in iframe or not, but there is one possible(not very nice) workaround, you can set iframe to width which is not commonly used by devices (example 463px) and then set media query for this resolution which apply when content is shown in this iframe. This is really nasty way since its not 100% and i would not recommending that.
I'm adding a Chatango HTML5 chat box to my website, but when users scroll up or down in the chat box, it also scrolls up or down the rest of the page. I've been experimenting with different codes I've found on this site, but so far nothing has worked.
I thought I found a solution here: How to disable scrolling in outer elements? and applied it to my chatroom. It works exactly how I want it to on this codepen editor: http://codepen.io/EagleJow/pen/QbOBJV
But using the same code in JSFiddle: https://jsfiddle.net/4bm6ou90/1/ (or on my actual website) does not prevent the rest of the page from scrolling. I've tested it in both Firefox and Chrome with the same results.
Here's the javascript:
var panel = $(".panel");
var doc = $(document);
var currentScroll;
function resetScroll(){
doc.scrollTop(currentScroll);
}
function stopDocScroll(){
currentScroll = doc.scrollTop();
doc.on('scroll', resetScroll);
}
function releaseDocScroll(){
doc.off('scroll', resetScroll);
}
panel.on('mouseenter', function(){
stopDocScroll();
})
panel.on('mouseleave', function(){
releaseDocScroll();
})
Any ideas?
It didn't work on JSFiddle because I didn't have jQuery set on the side menu and it didn't work on my website because the '$' symbol in the javascript conflicted with that same symbol in the jQuery (or something like that).
Here's the JSFiddle with better code and set to load jQuery: https://jsfiddle.net/4bm6ou90/7/
The Javascript:
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(".panel").on("mouseenter", function(){
$(document).on("scroll", function(){
$(this).scrollTop(0);
});
});
$(".panel").on("mouseleave", function(){
$(document).off("scroll");
});
});
Also gotta have that jQuery CDN in the html head section.
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I have the below code. I'm trying to set a click event on the inner content of the iframe.
$(function(){
$("#popupIframe").load(function(){
var selection = $(this).find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
console.log("this = ", $(this));
});
});
selectLocation is a class on a div element inside my iframe html. The above doesn't seem to work or at least the click event is not getting called. The console is tracing out the iframe selector.
This will only work on an iframe which has the same domain as the parent. Use contents() which you can then traverse just like any other object.
Example HTML:
<iframe id="fiddleframe" src="jsfiddle.net" width="400" height="400" />
Example JQuery:
$('#fiddleframe').contents().find('.pageHeader').css('border','3px solid red');
http://jsfiddle.net/AlienWebguy/Rbe2u/
UPDATE: A question was asked in the comments about using this practice on an iFrame that was created on the fly. To accommodate for JQuery-created iFrame, you need to ensure the iFrame's DOM has been loaded completely before you can apply any CSS manipulation.
$('#create').click(function(){
$('<iframe/>')
.attr({
id:"fiddleframe",
src:"jsfiddle.net",
width:"400",
height:"400"})
.appendTo('body')
.load(function(){
$(this)
.contents()
.find('.pageHeader')
.css('border','3px solid red');
});
});
http://jsfiddle.net/AlienWebguy/Rbe2u/1/
For anyone who is looking for the answer. This does not work for cross domain files.
$(function(){
$("#popupIframe").load(function(){
var $iframe = $(this.contentDocument||this.contentWindow.document);
$iframe.find(".selectLocation").click(function(evt){
evt.preventDefault();
console.log("clicked");
});
});
});
Thanks to HackedByChinese who posted it on this thread. How to find a div inside of an iframe