I have a problem with adipoli plugin - it doesn't want to work though everything I have done seems to be correct. The code is as follows:
head section:
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/slider.js"></script>
<script src="js/jquery.adipoli.min.js"></script>
<script>
$('.shadow').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
</script>
content section:
echo '"<a><img class="shadow" src="photos/thumbs/thumb_'.$image['filename'].'" alt="" /></a>';
Along with adipoli hover effect, I want to make a simple css drop shadow effect and it works in comparison to hover effect. Lightbox and slider script work perfectly as well.
Any useful ideas would be appreciated, especially useful ones. ;-)
$(document).ready(function() {
$('.shadow').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
});
Wrap it like this to make sure the element exists before you try selecting it.
Related
So I am trying to use some jQuery on a site I am building, but nothing seems to get it working.
Here is how I have the files linked in my html:
<head>
<title>Eddy: Designer</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script src="script.js"></script>
</head>
Then in my javascript document "script.js" I have this code:
$(document).ready(function () {
"use strict";
$('#branding').click(function () {
$('.branding').removeClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#ui').click(function () {
$('.branding').addClass('.hidden');
$('.ui').removeClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').addClass('.hideen');
});
$('#logos').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').removeClass('.hidden');
$('.print').addClass('.hideen');
});
$('#print').click(function () {
$('.branding').addClass('.hidden');
$('.ui').addClass('.hidden');
$('.logos').addClass('.hidden');
$('.print').removeClass('.hideen');
}); });
My code editing software says that my $(document).ready is using a '$' before it is defined... I have no idea what that means or if that is what is causing me these issues.
The idea is, when I addClass '.hidden' it will make every image that ISN'T the category that the button is labeled go to 50% opacity. This would in a sense "highlight" all the items that are "branding" or what have you.
I have been looking at tutorials about using jQuery, and I can't find what is going wrong. Please help. I am stressing myself out over this.
I tried linking the jQuery like this:
<link rel="stylesheet" type="text/css" href="main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
This did not fix my problem. Is my jQuery code written incorrectly and that's why it isn't functioning? It seems like I am loading the jQuery properly, but it still doesn't work.
First you have dots in removeClass and addClass method. You need to pass only class names not .classname, only classname. And as other sad you should check your folder structure and try loading jQuery from some CDN.
In your CSS you have #branding and in HTML and JS it's a class. And you are adding classes the wrong way you in HTML. Multiple classes are separated by spaces in class attribute like:
class="one two"
not like class="one" class="two"
Try this fiddle , it's working xD, I have just commented opacity and use outline: solid 2px red;. So you could better see changes when clicked.
I am having trouble using jQuery to fadeOut() an image and fadeIn() another when a button is clicked.
To keep it simple, here is the HTML of just the part that needs to be affected:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
</div>
</body>
Here is the jQuery:
$(document).ready(function() {
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow");
$("#more-info").fadeIn("slow");
});
});
When the button #call-to-action is clicked, the #landing-page div should fadeOut, and the #more-info image should fadeIn. It is not working. In fact, any jQuery command I've typed in has not worked for other divs. I believe there is something wrong with my jQuery plugin, or I'm missing some reference to the jquery sheet.
"or I'm missing some reference to the jquery sheet."
Yes. The code you show does not include the jquery.js file. If you have a copy of jquery.js in your project then add this in the <head> section immediately before your other JS include:
<script type='text/javascript' src='jquery.js'></script>
Otherwise you can reference a copy from a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
(Specify whichever version of jquery you want to use in accordance with what your chosen CDN supports; I've suggested the latest version compatible with old IE.)
Also you probably want to hide the second img to start with, and not fade it in until the first img has finished fading - if you pass a function as the second argument to .fadeOut() it will be called after the fadeout finishes:
$(document).ready(function() {
$("#more-info").hide();
$("#call-to-action").click(function() {
$("#landing-page").fadeOut("slow", function(){
$("#more-info").fadeIn("slow");
});
});
});
Demo: http://jsbin.com/OmaCOju/1/edit
You missed to include the jquery library. You can include it from google CDN. From you question i understand that on click of a button you want div to be fade-in and fade-out. Please refer the below demo for doing this.
Demo : http://jsbin.com/IGAJeqew/2/edit
After Struggling I have installed a multiple layer drop down menu. When all is well I found that all the buttons like present on my website Please Click Here are hiding. I found its the issue with javascript present in my html head. Please solve this issue...
HTML HEAD CODE
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-menu-7').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'slide'
});
});
</script>
If you want jquery.dcmegamenu.1.3.3.js and jquery.hoverIntent.minified.js files I will sent to you.
Also, there is a splitter on the totally right hand side of my menu about 1mm which goes beyound the page. Can we delete it ????
Thanks for your support.
I am using SimpleTip to generate a tooltip when the user hovers over a cell in a table. The tooltip shows, but it expands the size of the cell. How can I make it hover over the cell without changing its size?
Here's what I currently have:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.simpletip-1.3.1.js"></script>
</head>
<body>
<table border="1">
<tr><td id="test">foobar</td></tr>
</table>
<script type="text/javascript">
$("#test").simpletip({
fixed: true,
content: 'hello world!'
});
</script>
</body>
</html>
I recommend you using qTip (the successor to Simpletip) and it works with your case
Try this:
http://jsfiddle.net/ynhat/PydCK/
Looks like you're using "simpletip" and not qTip in your code. That may be the reason why. What browser are you using? It's possible you might be using IE and without the right doctypes your page won't display properly.
I'll have to run your code and test it.
The reason is that SimpleTip does not use use a holder element like most other libraries. It rather puts the tooltip inside the tooltipped element. This works for some basic layouts but it does not work for others – especially ones that use relative/absolute positioning of elements.
So the solution is as proposed: Try it, if it doesn't work with your layout, try some other library.
Actually I have forked a tooltip based on SimpleTip 1.3.1 which has this issue fixed. I will be releasing it in a while. You probably have solved your problem in the meantime, though. :)
I am having a couple problems trying to manually insert some jQuery features into a wordpress theme. I have a lightbox wordpress plugin that is jQuery based that is working fine.
So if I manually load the jQuery script into wordpress the functions seem to work but instead of say a slide being hidden it is revealed when it should still be hidden. Or a pop up that should work is already being shown instead of hidden. I don't think I'm supposed to manually include the jQuery into my skin but using the wp_enqueue_script('jquery'); doesn't seem to be resolving my issues either.
<script src="http://platform.twitter.com/anywhere.js?id=i5CnpkmwnlWpDdAZGVpxw&v=1" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#twitpanel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
<div id="tweetit"><a class="btn-slide">Tell em'</a>
<div id="twitpanel"></div>
<script type="text/javascript">
twttr.anywhere(function (T) {
T("#twitpanel").tweetBox({
height: 100,
width: 225,
defaultContent: "Some Random Text"
});
});
</script>
</div></h2>
Like I said it works but in the reverse fashion that it should be.
I think I'm just loading in something wrong?
TIA,
Chase
maybe you need to default the div to hidden?
<div id="twitpanel" style="display:none"></div>
or
<div id="twitpanel" style="visibility:hidden"></div>