I have been scratching my head on this one and just not quite getting it at the moment.
I am designing a "tab" theme for a new design project I am attempting which can be viewed working correctly here http://jsfiddle.net/a598t/ ... this will be the end result when it is working on anywhere but fiddle ... This is where I am stuck ...
I have developed the same code as seen in jsfiddle using Dreamweaver and it just will not perform anything from .hide() to .animate({})
I am no expert on jQuery but I know when something makes absolutely no sense. Could I have somebody look over my shoulder on this and see if I am just blind? Here is my code snippet from dw ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#billing").click(function() {
$(this).animate({
width:100
});
});
});
</script>
<style type="text/css">
#billing, #tracking, #support
{
width:20px;
height:500px;
background-color:black;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div id="billing"></div>
<div id="tracking"></div>
<div id="support"></div>
</body>
</html>
This all looks correct to me ... but like I said, no expert ... thanks ... btw I cut out most of the header so it was less code ... thanks for any help you can offer
use this one :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
code working...
Related
Basically, I want a div box to slide in on the page when it loads. I tested it on other websites, and html previews, all of which have worked so far.
It just seems to be that this specific website doesn't seem to like it, and I can't figure out why.
The HTML:
<div id="kitten">
<div class="banner">
bloop
</div>
</div>
The script:
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
</script>
The CSS:
#kitten{
position:absolute;
width:100%;
height:920px;
top:0px;
left:0px;
background:white;
}
.banner{
position:fixed;
width:600px;
height:45px;
left: 0;
right: 0;
margin: auto;
background:black;
color:white;
text-align:center;
z-index:500;
}
I'm jut curious if the website has some sort of way of blocking it, or if I happen to be using the wrong installation of jquery(?) Is there any way to find out what version of jquery to use that will work on there.
NO. I do not OWN the site, it's just a profile page that I posted some code onto. I'm not "hosting" anything.
First of all, you have to include jQuery library before that your js script
perhaps, "$" <- this object used by other libs, you have to check this link.
https://api.jquery.com/jquery.noconflict/
Add JQuery library before your script so that $ can be identified.
Eg:-
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
If you are using WordPress, Please convert $ to 'jquery`
$(document).ready(function() {
to
jQuery(document).ready(function($){
Try this, firstly load jquery before body closing tag</body>
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>
then, create in the same folder of your index.html a file called script.js that should look like this :
$( document ).ready(function() {
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
});
Now include it in your html just after jquery:
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html
If still not working try, as #Arshid KV said, to change
$(document).ready(function() {
to
jQuery(document).ready(function($){
I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.
I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.
In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).
Here is my HTML, I am just using the stock mootools downloaded from their website.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Further Description of Problem
Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.
Any ideas?
EDIT
Currently attempting this code, still nothing shows up.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
EDIT 2
Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.
It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.
"Wut." is my only response.
Edit 3
I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.
In summary: Today I learned that CSS can keep javascript events from firing.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
I think you have a syntax error in background: color
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});
The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit
For reference: http://mootools.net/docs/core/Utilities/DOMReady
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code
How can I add loading effect on <div>. In this code my members.php is so big file so its take time to load. So I want to show that loading… in my member <div> with effect. my javascript skills are so poor so I don’t know is this a right idea to do this or I have to code in member.php. I am so new and try to learn so please help me. I have tried with some free text javascript effect but I couldn’t find what I looking for. I want some image effect like rounding circle or something like that. Here is my code. I appreciate all answers.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#member').load('members.php').show();
});
</script>
</head>
<body>
<div id member>Loading…</div>
</body>
jQuery
function showLoading()
{
$('<div class="loading"/>').appendTo('#member');
}
showLoading();
$('#member').load('members.php');
CSS
.loading {
background: url('') no-repeat;
padding: 12px;
}
Replace the url with the path to the loading image you want, and the padding should be half the image area size.
Simple fiddle available here