I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.
So this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script>
<style>
#div02{background:url(norahalf.png) no-repeat; background- size:contain;height:100px;width:100px;position:absolute;}
#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>
<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>
Any help would be greatly appreciated!
Nora
Try not having the animate function executed after hovering the paragraph, then:
$(document).ready(function(){
$("#div02").animate({left:'150px'});
$("#div01").animate({left:'180px'});
}
To start automatically you just need to trigger mouseover event on page load:
$(function() {
$("p").hover(function() {
$("#div02").animate({ left: '150px' });
$("#div01").animate({ left: '180px' });
})
.trigger('mouseover');
});
I'm not sure if you still need this p hover event at all though.
Demo: http://jsfiddle.net/rDMGC/
Related
Right now, I have this working iframe for a map.
<div style=" position: absolute; top: 200px; left: 508px; width:300px;max-width:100%;overflow:hidden;height:200px;color:red;"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
I would like to initially have this hidden and have a function such that I can call and add and remove it on call. I am trying to write something like:
var mapIsOn = false;
showMap(_city, _state, _country){
if(mapIsOn == false){
svg.append("iframe")
... add the features listed above
.attr("id","MAP")
}else{
svg.selectAll("#MAP").remove();
mapIsOn = false;
}
Is there any way to do it? I've seem that it is possible to create div's but so far with this, I am not having much luck. Any help would be really appreciated!
There are lots of ways to achieve that. This is probably the simplest method. Idea is to set display none and remove it when we want to show the map.
.nodisplay {
display : none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#my-map-display").toggleClass("nodisplay");
});
});
</script>
</head>
<body>
<button>Toggle map</button>
<div id="my-map-display" class="nodisplay" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
</body>
</html>
I'm working on a simple HTML/jQuery script.
Right now when i click on the button which is inside the iframe it is changing the iframe's height that is calling the content with the button.
Take a look at the code:
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the iframe.php content:
<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<div style="display:block;height:300px;">
<h3>The iframe content</h3>
<button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button>
</div>
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
})
</script>
The problem is coming when i try to add this:
<style>
#outerdiv
{
width:400px;
height:300px;
overflow:hidden;
position:relative;
border:2px solid #fff;
}
#inneriframe
{
position:absolute;
width:400px;
height:700px;
border:0px;
}
</style>
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
As you can see i've added a <style> tag where i added CSS for the elements outerdiv and the iframe inerriframe and now when i click on the button it's not chaning the iframe's height.
When i remove the <style>....</style> tags and all the content inside them the script is starting to work again.
Here is the demo: http://beta.sportsdirect.bg/test/
This is the working demo when i have not added the <style></style> tags.
Can you help me set up the CSS for these elements and make the jQuery script works as well ?
Thanks in advance!
The event will not trigger it's function when the document is not fully loaded inside the iframe page.
Instead of:
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function(){
$("#SuperWebF1").on('click',function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
});
</script>
For it to listen to the click event when all the .css,.js and whole documents in the page are completely ready.
I hope this will help?
In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.
You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.
with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>
Basically, I currently have a slide down menu that displays links when you click the header.
I want this to change to a horizontal slide but my knowledge is currently only with HTML and CSS, in other words I'm not very good at jquery/javascript.
So yeh, here's an example (Click CATEGORIES) http://newsunken.tumblr.com/
I would like it so that when you click categories the categories slide from the left to the right and display like "CATEGORIES TEES JUMPERS HEADWEAR"
Sorry for the noob question!
$('#box').click(function()
{
$(this).animate({
width: '350px'
}, 300, function() {
// Animation complete.
});
});
and
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
here's the best thing i could come up with but isnt as sleek as the one on newsunken.tumblr.com
This script slides horizontally fine, just in case I am showing the whole page. Please, pay attention to the document.ready function
<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#box').click(function()
{
$(this).animate({width: '350px'}, 300, function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>
I'm not sure if it is what you are looking for, but try this:
$('#box').click(function()
{
$(this).animate({
height: 'toggle',
width: '350px'
}, 300, function() {
// Animation complete.
});
});
<html lang="en">
<head>
<style>
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;}
div.block {margin-top:10px; width:200px;}
div#thisdiv a {color:#fff;}
</style>
</head>
<body>
<div id ="one" class="block">one</div>
<div id="thisdiv">hello</div>
<div id ="two"class="block">two</div>
<div id ="three"class="block">three/div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$('#thisdiv').fadeIn(400);
});
$('div:not(#thisdiv)').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
});
</script>
</body>
</html>
#thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out.
$('#thisdiv').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
I couldn't figure out what's why jquery's :not selector is not doing what I wanted to.
Am i using it wrongly?
1 - You need to use mouseover, not hover for the first binding:
$('#one').mouseover(function() {
$('#thisdiv').fadeIn(400);
});
hover accepts two function parameters (mouseover/mouseout).
2 - Your closing div tag at the end of your markup is broken (missing a <):
<div id ="three"class="block">three/div> <-- here
I tested your code having made the above modifications, and it seems to work as you want it to (if I've understood correctly). Test it here.
if you are going to explicitly set the time, you will need to pass it in as a hash parameter. Otherwise you can use 'slow', 'fast' or the default which is 400.
$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })