I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
Related
I was searching for answer on the internet and on stack's other questions, but none of the solutions are working for me. I'm trying this for days. My timepicker JQuery plugin appears behind the triggered modal window. I don't have much time left before the science fair and I'm really in trouble. I would be really, really greatful if someone knows how to help me. Cheers guys and thanks in advance. Here's the code and picture:
Form section
<div class='form-group'>
<label for='start' class='col-xs-4 control-label'>Starting time</label>
<div class='col-xs-5'>
<?php include('test.php'); ?>
</div>
</div>
Test.php
<html>
<head>
<style type="text/css" media="all">#import "timePicker.css";</style>
<style type="text/css">
input {
margin:0;
padding:0;
}
pre {
background:#fff;
border:1px solid #ddd;
padding:4px;
}
.ui-timePicker {
position: relative;
z-index: 10000 !important;
}
</style>
<meta charset='utf-8'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.timePicker.js"></script>
</head>
<body>
<p><input id="time1" type="text" class="time form-control" /></p>
<script>
$("#time1").timePicker();
</script>
</body>
</html>
Have you tried just changing the z index of your time picker?
<style>
#time1{
z-index:1151 !important;
}
</style>
Here is my code,
<html>
<head>
<style>
.containerTitle {
background-color:silver;
text-align:center;
font-family:'Segoe UI';
font-size:18px;
font-weight:bold;
height:30px;
}
</style>
</head>
<body>
<div id="a"/>
</body>
</html>
how to change the background-color in containerTitle style using jquery..
there you go: $(".containerTitle").css("background-color","red");
usage example:
// wait until the DOM tree is loaded
$(document).ready(function(){
// click event handler on <a> tags
$("a").click(function() {
// change the color on click
$(".containerTitle").css("background-color","red");
});
});
.containerTitle {
background: black;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerTitle"></div>
<a href="javascript:;" >change color</a>
try this
$(".containerTitle").css(
"background","#dedede"
);
Add this code to change the style attribute dynamically.
$('.containerTitle').css({'background':'red'})
Like this,
<script>
$(document).ready(function() {
$(".containerTitle ").css("background-color","silver");
});
</script>
and also you should js library in your head section of your code:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
and this <div id="a"/> should be like this, <div id="a" ></div>
When I click on first time flip, it shows panel, then I click on panel, it will shows the sub-panel.
But when I click multiple times on flip, and then click single time on panel, then it works wrongly as the sub-panel shows and hides multiple times for single click.
What's the problem?
My code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$('#panel').slideToggle("slow",function(){
$('#panel').click(function(){
$('#subpanel').slideToggle("slow");
});
});
});
});
</script>
<style>
#panel,#flip,#subpanel
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel,#subpanel
{
padding:50px;
display:none;
}
</style>
<style>
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<div id="subpanel" style="display:none;">hello </div>
</body>
</html>
Try Moving the .click on #panel out of the click handler for #flip. Everytime you click flip you're readding the click handler for panel.
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. Heres is the code i wrote.. i made also a jsbin page to show you
any suggestions?
http://jsbin.com/xefanaji/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="front">
<div><p>Button</p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
</body>
</html>
css
#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{
display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}
#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}
if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.
<div><p>Button</p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link
well few more thing,
always load script in your <head> section, and you don't need to add src in script tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....
<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});
});
</script>
Try this
<div id="front">
<div><p><a id="button" href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
DEMO
Put the jQuery library in the head section of your document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor e.g.
<span class="button">Button</span>
then add a little styling
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set.
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
You are missing id #button for that link.
<a id="button" href="">Button</a>
Thanks ALOT guys! I've got it working now, thank you!
I have a hopefully easy question:
This: http://jsfiddle.net/gSAjV/2/
is what I want to achieve, but I can't seem to get it working.
I'm all new to javascript, so I'm not sure how to properly put the script in the html document.
I have tried the <script type="text/javascript"> and others, but it just doesn't work.
So i wondered if anyone would take the time to put it in a html document and get it working, and ofcourse posting the entire code. I would be very greatfull!
my doc:
<html>
<head>
<style>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>
$('.childDiv').click(function(){
$(this)
.css('background-color','#00ff66')
.siblings()
.css('background-color','#ffffff');
});
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
Put this somewhere in your html file:
<script type="text/javascript">
$(document).ready(function() {
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
You can put it more or less anywhere, but just before the </body> tag would be a good place.
And as #MarkK has rightly pointed out, you need to reference the jQuery library itself.
This goes between <head> and </head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
In jsfiddle, you can right-click on the Results pane and View Source. This will give you the exact html that produces the result.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});//]]>
</script>
</head>
<body>
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
</body>
</html>
You just need to import jQuery (the library that contains the $ functions). This is simple, just add
<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
to your HTML, before your other script.
<html>
<head>
<!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
<script type="text/javascript" src="jquery.js"></script>
<sript type="text/javascript">
jQuery().ready(function($){
$('.childDiv').click(function(){
$(this).parent().find('.childDiv').css('background-color','#ffffff');
$(this).css('background-color','#ff0000');
});
});
</script>
</head>
<body>
<!--the content paste your html here-->
</body>
</html>