I have to flip an image in my project and im using a function in combination with css to implement it. When it's flipped, it shows another div en when flipped again ofcourse back to the original div. But when I click nothing happens. So something is still wrong, but no idea what.
Javascript:
<script type="text/javascript">
$(document).ready(function () {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false);
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
HTML:
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<img src="Images/edan.png" alt="More about Edan" id="test" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
Edan
</div>
<div class="sponsorURL">
<!-- Edan-->
</div>
</div>
</div>
CSS:
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
I have included the jquery plugin:
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
Greets
I guess you have added the Jquery, and you may also add the Jquery UI
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
before
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
http://lab.smashup.it/flip/ On the right side, it mentions that this plugin depends on Jquery and Jquery UI.
Hope it works.
Related
I have this huge problem I need a fix for.
So I have this window (parent Div) and the caption inside (child Div).
And I'm using jQuery and jQuery UI to accomplish a draggable window. But, the only way to make the entire window move is to do $('#parent').draggable(); and trying to do this on #child will break the window. The only draggable element then would be the caption (child div), and the window (parent div) will stay in place.
Showcase (The Window Is Supposed To Be Draggable Only By The Caption Bar):
This is not supposed to be happening but it does, because function acts on parent div and not child div
index.php:
<?php CreateWindowFn('Log into system', '<button>Log in</button>', 'sys_login_container', 'login_caption', 320, 500); ?>
// Returns: <div class="window" onload="$('#sys_login_container').draggable();" id="sys_login_container" style="width:320px !important;height:500px !important"><div class="caption" id="login_caption">Log into system</div><div class="text"><button>Log in</button></div></div>
CreateWindowFn.php:
function CreateWindowFn($caption, $function, $windowid, $captionid, $width, $height) {
if (empty(null)) {
$text = $function;
echo "<div class=\"window\" onload=\"$('#$windowid').draggable();\" id=\"$windowid\" style=\"";
if (!empty($width)){echo "width:$width" . "px !important;";}else{;;}
if (!empty($height)){echo "height:$height" . "px !important";}else{;;}
echo "\"><div class=\"caption\" id=\"$captionid\">$caption</div><div class=\"text\">$text</div></div>";
return (bool) 1;
} else {
return (bool) 0;
}
}
interface.css[.window]:
.window {
padding:0px;
margin:0px;
width:auto;
height:auto;
background:#fff;
border:1px solid #000;
color:#000;
box-sizing:border-box;
}
.window .caption {
background:#000;
height:16px;
color:#fff;
width:100%;
border:1px solid #fff;
text-align:center;
font-size:16px;
box-sizing:border-box;
cursor:default;
}
.window .caption::selection {
background:none;
}
.window .text {
background:none;
background-color:none;
border-top:1px solid #000;
width:auto;
height:auto;
padding:-1px 2px 2px 2px;
box-sizing:border-box;
}
I need a way to make the child div actually drag the window and itself, only holding the cursor on caption should make the window moveable.
Thanks in advance.
You need to use the jQuery UI handle option to specify what elements are allowed to drag. The jQuery UI website has a page on this.
When you set an element to be draggable you would pass { handle: "selector" } as an argument to draggable(). In your case you would pass { handle: ".caption" }.
To create your window in PHP, the relevant line in your CreateWindowFn function would be changed to:
echo "<div class=\"window\" onload=\"$('#$windowid').draggable({ handle: '.caption' });\" id=\"$windowid\" style=\"";
Using JQuery draggable/droppables to allow me to drag divs from one container to another and have them inserted as children into the container. I can see the move in HTML but on the screen the div disappears when i release the draggable into the target.
http://jsfiddle.net/laurencefass/tqqLxquL/2/
<div id="left" class="droppable">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div class="draggable">4</div>
</div>
<div id="right" class="droppable">drag blocks in here</div>
JQuery
$('.draggable').draggable();
$(init);
function init() {
$('.draggable').draggable();
$('.droppable').droppable({
drop: handleDropEvent
});
}
css
.draggable {
width:50px;
height:50px;
background:gray;
padding:5px;
margin:5px;
border-radius:10px;
z-index:100;
display:block;
}
.droppable {
box-sizing:border-box;
border:2px solid black;
width:50%;
float:left;
min-height:300px;
}
Here is a working exemple of what I understood you want to do.
http://jsfiddle.net/tqqLxquL/5/
The dragged element have a left property when dropped, you have to override it.
function handleDropEvent( event, ui ) {
console.log($(ui.draggable[0]));
var $draggable = $(ui.draggable[0]);
$draggable.appendTo(this);
$draggable.css({
left: 0
})
}
Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.
After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull
I am using this plugin: http://www.ericmmartin.com/projects/simplemodal/
I am trying to use the default button to close the pop-up window, but it will not close. I have added the simplemodule-close class to the that will close the div, but that is to no avail. I have also tried using jQuery.modal.close(); but that is not working..
I have read hundreds of other posts, but for some reason it is not working.
Note: I am working in Wordpress so $ = jQuery (for noConflict)
My HTML:
<div id="basic-modal-content">
<a class="modalCloseImg simplemodal-close" title="close"></a>
<h1>Login</h1><hr />
</div>
CSS:
#basic-modal-content {
display:none;
background-color:#FFF;
border:4px solid #444;
padding:0 20px;
z-index: 2000;
position: fixed;
left:50%; margin-left:-280px; top:10%;
}
#basic-modal-content hr{display:none;}
#basic-modal-content .loginform form{width:100%;}
#basic-modal-content a.modalCloseImg{right:-13px;top:-10px;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
a.modalCloseImg {background:url(/files/2013/12/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
Javascript:
jQuery(function (jQuery) {
// Load dialog on click
jQuery('.login_nav .basic').click(function (e) {
jQuery('#basic-modal-content').modal();
return false;
});
jQuery('.modalCloseImg').on('click', function(){
jQuery.modal.close();
})
});
The button to make the div appear:
echo "<div class=\"login_nav\">Logout</div>"; } else { echo "<div class=\"login_nav\">Login</div>"; }
} else { echo "<div class=\"login_nav\">Login</div>"; }
display:inline resets height and width
An empty inline element will have no width or height, so there is nothing to click. Try this:
a.modalCloseImg {
display: block;
}
I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!
If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>
Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)
You might want to try something like this instead:
Default Categories