I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#button').click(function () {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
document.getElementById('loadingimage').style.visibility = 'hidden';
}
});
});
</script>
<div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
alt="test image" width="860" height="474" /></div>
<div id="iframeHolder"></div>
</body>
Several points:
As #stud3nt noted, your HTML is invalid. Also a space is missing between "loadingimage" and class. You should be using an editor that highlights HTML and JavaScript syntax errors.
Use proper the HTML elements for the proper job. If you want to have a button, then use a <button> element and not a <div> element.
Hiding the image inside the "button" with visibility: hidden is strange thing to do. This won't remove the button element, so it's still there and still can be clicked. Learn the difference between visibility: hidden and display: none. When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.
jQuery 1.6.0 is ancient. Either use a current version, or better, don't use jQuery at all. For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.
There is typo in your img html element.
You forgot to add = in <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...
Related
I am developing an php aplication and I used datepicker javascript. The problem with this is that if I scroll down it does not appear in the right position. It gets really bad if the page gets too long, the date picker is not even visible.
I am using IExplorer, it might be outdated. It is not a solution to update the browser, cause this needs to run on 200+ PCs
<script type="text/javascript" language="javascript">
$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });
</script>
<input type="text" id="udate" name="udate">
Code as requested by comment
<style type="text/css">
html {
overflow-y: scroll;
}
body {
size:8;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
If the datepicker is generated inside the container this wouldn't be a problem.
See this
Solution: http://jsfiddle.net/jbK6a/15/
I placed the datepicker behind the input with the beforeShow event.
And I used position: relative; on the scrollable container so that the absolute element listens to the container.
Or Allow the scroll for your list and fix the Date picker.
Try this work around to adjust position of datepicker after it opens (please adjust position as per your requirement)
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
make sure you got
<!DOCTYPE html>
at the top of your html output.
The solution was a combination of the answers.
For start I did what norhkildonan said:
make sure you got
<!DOCTYPE html>
at the top of your html output.
Then edited a bit the css and after that added Bhushan Kawadkar part:
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
What worked for me was adding the class 'container' where I needed it attached.
I am getting html code from iframe and want to set background-color to this class: class="body"
My HTML source looks like this:
<iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some-url" scrolling="no">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<body class="body">
....
</html>
I have tried with this jQuery code but not worked for me.
<script type='text/javascript'>
$('iframe').load(function() {
$("iframe").contents().find(".body").css('background-color', 'red');
});
</script>
First I have tried to check if color is working or not. If works I want to set background-color to none.
Is it possible?
Thanks.
No, it isn't possible. You aren't allowed to access the DOM of a page on a different origin.
If you have the cooperation of skycheck, you could post a message to the page in the frame and it could listen for that message and set the class based on it.
I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation
I am attempting to code a simple example of a Dojo dialog box. I have copied the example shown in the Dojo reference here => http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html
My code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Dialog Test</title>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.widget.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.TabContainer")
dojo.require("dijit.layout.ContentPane")
</script>
</head>
<body>
<div id="dialogOne" dojoType="dojox.widget.Dialog" title="My Dialog Title">
<div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
<div dojoType="dijit.layout.ContentPane" title="foo">Content of Tab "foo"</div>
<div dojoType="dijit.layout.ContentPane" title="boo">Hi, I'm Tab "boo"</div>
</div>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonOne" dojoType="dijit.form.Button">Show me!
<script type="dojo/method" event="onClick" args="evt">
// Show the Dialog:
dijit.byId("dialogOne").show();
</script>
</button>
</body>
</html>
When the page loads in a browser, the Dialog doesn't work. I just see the text from the tabbed panes appear in the browser.
I've copied the code from the reference guide exactly so I'm very confused. Any suggestions?
Thanks.
James.
The Dojo samples unfortunately tend not to work fully 'as is', but are bits of skeleton code that need wrapping up in various standard bits of ceremony.
You've at least three things causing this not to work and render correctly. There may be other problems on top, but these will definitely cause it not to render:
You need to link to a version of the core Dojo scripts. Linking to a CDN version is a simple way to go. e.g. <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>. Details are here: http://dojotoolkit.org/download/. Be sure to put this before your require scripting.
Add a link to a Dijit theme style sheet (CSS file) in your page, otherwise none of the widgets will display correctly. e.g. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"/>
Add a class attribute on the body element describing which theme you want to use. e.g. <body class="claro">.
Only when you've done all those three things will it have a chance of working. There may be other problems too, but they're the fundamental three.
I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).
Anyway id appreciate any solution.
My attempt at jquery/css/html looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.
$('.box').focus(function() {
$('.infoBubble').show()
});
In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
Try the following:
$('.box').click(function (){
$('.infoBubble').toggle();
});
By the way. The css-property to hide/show something is not visibility, but display. For example:
display: none;
or
display: block;