I am new to jquery and have problem with one part of my script. basically I am making dropdown div when mouse is over the button, but div starts moving up and down like crazy. here is what i have done: `
<script type="text/javascript">
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
$("#drop1").slideDown();
});
$("#first").mouseout(function(){
$("#drop1").slideUp();
});
});
also I tried using boolean variable but it gives me error.
<script type="text/javascript">
$(document).ready(function(){
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
$("#drop1").slideDown();
opened = true;
}
});
$("#first").mouseout(function(){
if(opened){
$("#drop1").slideUp();
opened = false;
}
});
});
here is HTML if you want, but I think there is everything ok.
<link rel="stylesheet" type="text/css" href="design.css">
<div id="first" style="position: absolute; left: 0px;">
<a class="btn" href = "TheShooter/Launcher.exe" ><b>LAN shooter project</b></a>
<div id="drop1">
<em>shooter project main page</em> <br/>
info: Local Area Network multiplayer game, made with unity. Project not finished yet, but sometimes fun to play. <br/>
controls: walking: w,a,s,d<br/>
shoot: LMB.<br/>
zoom: RMB.
</div>
</div>
Thanks for any help.
--Nick.
So it looks like you might be more used to strongly typed languages like C#. JavaScript and its library jQuery are loosely typed, meaning you don't declare scope or type. Here's your code above cleaned up a bit to use correct syntax and solve the issues you're seeing:
$(document).ready(function(){
var opened = false;
// Instead of sliding this up, give the #drop1 element
// a property of display: none; to start - then remove the line below
$("#drop1").slideUp();
$("#first").mouseover(function(){
if(!opened){
// Below, I'm using a callback, which means the boolean
// won't update to true until after the animation is finished
$("#drop1").slideDown(400, function() {
opened = true;
});
}
})// Since it's the same element, we can chain events
.mouseout(function(){
if(opened){
// Another callback
$("#drop1").slideUp(400, function() {
opened = false;
});
}
}
});
});
Let me know if you have any questions about the above!
Hi please refer this fiddle which should answer your question. No need to add any boolean or conditional checking:
<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
and js
$(document).ready(function(){
$("#wrap").mouseover(function(){
$("#video").stop().slideDown("slow");
});
$("#wrap").mouseout(function(){
$("#video").slideUp("slow");
});
});
and css
#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
}
#video
{
display:none;
width:1024px;
height:278px;
border: 1px solid #000;
}
I think you should try something like this:
$(document).ready(function() {
$("#first").mouseover(function(){
$("#drop1").slideDown("slow");
});
$("#first").mouseout(function(){
$("#drop1").slideUp("slow");
});
});
See this example above, from the jQuery offical documentation, for more information:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
Here is one more answer with live example,
$(document).ready(function(){
$("#drop1").mouseover(function(){
$("#first").slideDown("slow");
});
$("#drop1").mouseout(function(){
$("#first").slideUp("slow");
});
});
#first, #drop1 {
padding: 5px;
text-align: center;
background-color: #acacac;
border: solid 1px #c3c3c3;
}
#first {
padding: 50px;
display: none;
background-color: skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="drop1">Mouse over on panel to slide down</div>
<div id="first">Hello Stackoverflow ..!</div>
Related
So I've just started with Javascript and learning the Jquery library, I have this simple box which I created in CSS and was animating it with Jquery, when a button is clicked the box gets bigger but when another is clicked it returns to its original size.
I've got the button to make the box bigger to work just fine but I can't seem to get the button to make it smaller to actually make it smaller.
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
width: '-=150px;'
});
});
.box1 {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box1'></div>
<button type='button' class='big'>big</button>
<button type='button' class='small'>small</button>
I don't understand why it won't work, sorry if this comes across as a silly question.
The reason why it's not working is that you added ; in height: '-=150px;'
If you remove it it's working just fine.
Demo
$(".big").click(function() {
$(".box1").animate({
height: '+=150px',
});
});
$(".small").click(function() {
$(".box1").animate({
height: '-=150px'
});
});
.box1{
width:10px;
height:10px;
background-color:blue}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="small">small</div>
<div class="big">big</div>
<div class="box1"></div>
I have a div and I'm trying to shrink it when I click a button. And when I click it again, I want it back to the original size. I'm using toggleClass for this, but I did something wrong with my code, and I'm not sure where. Please take a look. Thanks.
//*********************************************************************
<style>
div {
border: 1px solid black;
width: 500px;
height: 500px;
}
.shrink {
width: 250px;
height: 250px;
}
</style>
//*********************************************************************
<button type = "button"> click me </button>
<div> Can you tell me a secret? </div>
//*********************************************************************
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready($function {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
</script>
//*********************************************************************
It's kind of a typo. You wrote "$function {" but you probably mean this:
$(document).ready(function() {
The rest is fine.
Also, document ready can be expressed in a shorter form:
$(function() {
...
...
});
Maybe you just confused those two. I did a few times too, back in my beginner days :)
Here: the jQuery ready method takes an anonymous function as an argument... so te problem with your code was only to pass that function function(){}
Here you can see the code in action: http://jsfiddle.net/leojavier/41wmck17/
$(document).ready(function() {
$("button").click(function(){
$("div").toggleClass("shrink");
});
});
I have made a custom prompt box for Javascript so I don't have to use the stock ones, however I cannot figure out how to return the value from the directly from the cPrompt() function. I want to be able to use it like a normal prompt and be able to do stuff like var name = cPrompt("Whats your name") however to close the custom prompt I must use an event to trigger a function called ok() when a button is clicked. This inhibits me from returning the value directly from the cPrompt function. Can anyone figure out how I can do this? Here is my code:
HTML:
<html>
<head>
<title>Custom Prompt</title>
</head>
<body>
<p>content</p>
<button onclick="cPrompt('Message goes here')">Click me</button>
<div id="overlay"></div>
<div id="pBox">
<div id="cPromptOut" onclick="ok()"></div>
<input type="text" id="cPromptIn"/>
</div>
<link rel='stylesheet' href='customPrompt.css'/>
<script src='customPrompt.js'></script>
</body>
</html>
CSS:
#overlay{
width:100%;
height:100%;
position:fixed;
background-color:grey;
opacity:0.5;
z-index: 10;
display: none;
left:0;
top:0;
}
#pBox{
width:50%;
height:30%;
position:fixed;
background-color:red;
left:25%;
top:20%;
z-index: 11;
display:none;
}
#cPromptOut{
width:100%;
height:50%;
background-color: green;
z-index: 12;
text-align: center;
font-size: 1.5em
}
#cPromptIn{
width:100%;
height:50%;
border:1px solid black;
text-align: center;
font-size: 1.5em
}
JS:
var overlay = document.getElementById("overlay")
var pBox = document.getElementById("pBox")
var cPromptOut = document.getElementById("cPromptOut")
var In = document.getElementById("cPromptIn").value
function cPrompt(msg){
overlay.style.display = "block";
pBox.style.display = "block";
cPromptOut.innerHTML = msg;
}
function ok(){
overlay.style.display = "none";
pBox.style.display = "none";
}
console.log(cPrompt("enter you name"))
So right now I'm not able to collect the value in the box. Can anyone figure out how I can do this? Remember I want to be able to call it just like a prompt without having to use any other calls like console.log(cPrompt("say something")). I might be trying to over-think this or maybe its impossible, any ideas are welcome.
EDIT - ok so it won't be as simple as console.log(cPrompt('message')), but there is a kinda way to go about doing what you want. See this fiddle adapted from toby Ho's trampolines. I can't make it work in chrome for some reason, but firefox does the trick. the cool part is in main() (it will have to be inside a run(main()) call
function main(){
log('start listening');
log(yield prompt('hello'));//the code "seems" to halt here.
log('end script');
}
Again you're asking something quite hard so it won't be as easy as you would like it to be, but here it is. Also, it would've been cool to tell us what you had tried so far.
BEFORE EDIT :
At first glance I would say it is impossible. if your cPrompt() function holds the interpreter so it can return the user's input, I think th page will freeze. have you tried something like this?
//This will probably freeze the page
function cPrompt(_msg){
...//init the prompt
while( input == null){}//your prompt sets input in an event
return input;
}
The usual way to go about it is to pass a closure like this
function whenInput(_input){console.log(_input);}
cPrompt('message', whenInput);
Now, I'm thinking that there may be a way with the new generators in js 1.7.
So, what have you tried?
I'm a little new to HTML, CSS et al. I'm having trouble with the click event on a html page.
HTML
<div class="Box1 DaddyBox"></div>
<div class="Box2 DaddyBox"></div>
<div class="Box3 DaddyBox"></div>
CSS
.DaddyBox{
border:thick;
border-color:#FFF;
}
.DaddyBox:hover{
background: green;
}
.Box1 {
position: absolute;
left: 16px;
top: 96px;
width: 320px;
height: 96px;
z-index: 1;
background-color: #F5E255;
}
JS
$('.Box1').click(function(){
alert(Alert)
});
Is there something glaringly obvious that I'm missing? I am not getting the alert on click of the Box.
If clarity is required, I'm trying to create a grid like interface for a website. Each box will link to a new page. Again, I'm new to this and am only attempting what I have learned so far, so perhaps I am way off, feel free to point me in a new direction.
Thanks
you missed quotes for the message in alert(), change to:
....
alert("Alert");
...
and include jQyery library, and wrap your code in $(document).ready(function(){ ... }); if not already done, as:
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes to your message Alert
});
});
include java library in header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
$('.Box1').click(function(){
alert("Alert"); //add quotes
});
});
I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.
My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.
the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.
thanks in advance.
UPDATE:
the html calling the show/reveal actions are:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
The construct the actions for the drop down, Spry requires the following at the bottom of the page:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
In SpryCollapsiblePanel.css, amend the following style rules:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
This increases the padding on the left to make room for the image.
Then add the images to the following rules:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}
THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.
onclick switch an image then onclick of something else switch back to + sign
If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.
// Grab the img object from the DOM
var img = document.getElementById("theImageId");
// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.
Easy fix with some simple JavaScript.
Add the following script:
<script type="text/javascript">
<!--
function name ()
{
var img = document.getElementById("imgid");
if (img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
}
//-->
</script>
When that's done look at the div defining the collapsible panel. It looks something like this:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
All you need for this to work is to add onclick="name();" to the syntax:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>