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
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($){
When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:
JQuery:
$(document).ready(function(){ //Waits for page load
$("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
$($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
});
});
CSS:
a.spoilerButton,
a.spoilerButtonDark {
text-decoration:none;
color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
color:grey;
cursor: pointer;
}
a.spoiler {
display:none;
}
HTML:
<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->
<div class="contentBoxFooter">
Show/Hide <!--Button-->
</div>
What I would like:
Support for multiple buttons
A way to link the buttons to its appropriate spoiler at any place in the HTML
Problems I am facing:
Don't exactly know the proper way to link the button to its appropriate spoiler, or if I'm
doing it completely wrong
Current method uses href in anchor tag which shifts the page scroll location whenever clicked on
Main Question:
I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?
I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="a1" class="spoiler">Content</div>
<div id="a2" class="spoiler">Content</div>
<div id="a3" class="spoiler">Content</div>
<div id="a4" class="spoiler">Content</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$('#'+foo).slideToggle(1000);
});
});
</script>
</body>
</html>
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/
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...
I can't seem to find a javascript(jQuery or other) effect that works like I want it to. I was hoping someone can help me out.
I am working on a project that has 3 content boxes wrapped within a larger div. I am thinking of adding a "Get A Quote" button that will take the larger surrounding div and drop it when you click on the "Get A Quote" (think scooby doo(pull book out of bookcase and the wall drops)) and have it bounce when it hits like it actually has weight. Then go back up after the user has filled out the "Get A Quote" form.
I hope that makes a marginal bit of sense.
Just ask if you would like clarification or if you would like me to post a sketch of how it works.
This is an already available feature in JQuery UI. http://jqueryui.com/demos/show/.
This is how you do it
<style type="text/css">
#mydiv{
width:300px;
height:300px;
background:red;
display:none;
margin-top:30px;
}
</style>
<button>clickme</button>
<div id="mydiv"></div>
<script type="text/javascript">
$('button').click(function(){
$('#mydiv').toggle('bounce',300)
});
</script>
You can see a working example at http://jsfiddle.net/TUFaw/
I used toggle which means if you click on the button again, the effect will be revered back to hide the box. You can use many of the available effect (blind, clip, drop, explode, fold, highlight, puff, pulsate, shake, slide, size, scale)
If you never worked with jQuery before, make sure you include the required CSS and JS files.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>