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>
Related
I am very new to coding and am trying to combine html, css, and javascript for the first time. The task is to have buttons make changes to a box. For example one of my buttons is "grow", in which I want the box to increase in size when the button is clicked.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
Here is my CSS
body {
background-color: aliceblue;
}
.box {
height:150px;
width:150px;
background-color:orange;
margin:25px
}
And no javascript yet. I don't really know where to even start, I know how to combine CSS and HTML, however I am stumped when it comes to adding in the javascript. Any help is appreciated and thank you in advance.
Here is a good place to start.
https://www.w3schools.com/jsref/event_onclick.asp
okay.
javaScript can modify elements (HTML buttons for example) and their properties, like text content AND style (CSS).
first of all, you need to select the element into a variable
let btn = document.querySelector('#grow-btn)
let btn means you're declaring a variable, piece of storage, named btn.
you're putting inside of it the resulte of the expression.
btn.addEventListener("click", function(){/*here you're handling the click*/})
add a listener to the btn, so you can know when a click was made and respond to it.
inside the block you can change some css properties of a box in a similar way
In your button, you add a function 'onclick', like this:
<button id="button1" onclick="growFunction()">Grow</button>
Then, you go to javascript.js and create the growFunction() that will be executed when the button get clicked.
Also, to do the growFunction, either you use no parameters and inside the function you use document.getElementById('button').{your code}, or you pass this parameter, something like:
<button onclick="growFunction(this)">Grow</button>
javascript.js
growFunction(element){
element.yourcode...
}
A few tips to help you get started, first you can make a button do something with the "onClick" HTML attribute, where you might specify a function to execute when the button is clicked. Listeners are how some people do it, but that might be more complex than you're ready for.
<button id="button1" onclick="growBox()">Grow</button>
In your js file, you would define your function:
function growBox() {
let box = document.getElementById("box");
box.style.height = '200px';
box.style.width = '200px';
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/ is a good resource for how things work, and know that just googling things like "how change css with button javascript" can teach you almost anything. Even as a working developer you'll still do this.
Just keep plugging along, this feeling is how all of us started.
This seems to be so easy to do. But, I can't make it work....! So frustrated...
I googled this problem and tried to solve it for a few hours. (I read a number of posts on StackOverflow.) But, I still can't solve this problem...
The following posts cover similar issues. So, I tried to solve my problem by trying answers in the posts. But, nothing worked for me...
After reading this(jquery fadeIn not working), I tried .hide().
: didn't work...
After reading this(jQuery animations: fadeIn() hidden div, not showing content), I tried fadeIn().removeId('tutorialPages')
: didn't work...
Also, I tried display:none in CSS instead of .hide() in JS.
: didn't work...
Please keep in mind:
If you think it's a duplicate of another question, please let me know which one and how I can apply solution(s) in that question to my problem. I am new to JavaScript and it is still difficult for me to apply solutions that worked for same/similar issues to my problem. Thanks in advance! :-)
I am using Bootstrap 4.1.2. & jQuery 3.3.1.
(* you can't see the part I used Bootstrap in the following code snippet.)
Error Message:
I didn't see this error message when I wrote this code in JSFiddle. But, in this code snippet, the following code shows up when Press this! is clicked: "message": "Uncaught TypeError: $(...).fadein is not a function".
What I'm trying to do:
1. When the page loads up, only Press this! is shown.
2. Show the 1st sentence when clicking Press this!.
3. Show the 2nd sentence when clicking the 1st sentence.
4. Show the 3rd sentence when clicking the 2nd sentence.
5. Show the 4th sentence when clicking the 3rd sentence.
$(document).ready(function(){
$("#tutorialPages").hide();
$('#test').click(function(){
$("#tutorialFirst").fadein();
});
$('#tutorialFirst').click(function(){
$("#tutorialSecond").fadein();
});
$('#tutorialSecond').click(function(){
$("#tutorialThird").fadein();
});
$('#tutorialThird').click(function(){
$("#tutorialFourth").fadein();
});
});
/* #tutorialPages{
display: none;
}
*/
#tutorialGreen{
color:black;
font-weight: bold;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p id="test">Press this!</p>
<div id="tutorialPages">
<p id="tutorialFirst">This is 1st sentence.</p>
<p id="tutorialSecond">This is 2nd sentence.</p>
<p id="tutorialThird">This is 3rd sentence.</p>
<p id="tutorialFourth">This is 4th sentence.</p>
</div>
</body>
You Hide the parent element - $("#tutorialPages"), so it doesn't matter what will happen to its child elements, they won't be shown.
$("#tutorialPages") should always be shown, and show/hide only the children elements, or add $("#tutorialPages").show() to the first click event.
It should be .fadeIn() with a capital I
I'm working on putting together a portfolio site. It's coming along nicely, but I've hit a real shag.
I'm using one page, and have made four divs thus far to break up my work. I'll have graphic design pieces coming in from one side or the other as the user scrolls.
Now, I found WOW.js which is supposed to do precisely what I want it to, ie. make a graphic of mine show up only when the user scrolls down to it. BUT for the life of me, I cannot get it to work, and it's supposed to be so simple, doge style. Such amaze!
The graphic in question is a heart, and animate.css has a great 'pulse' bit of CSS I want to use. WOW.js is supposed to be fabulously with animate.css. But I'm completely lost. My JS skills are still very basic, so please be patient.
As the WOW.js docs state, I've linked to it with:
<link rel="stylesheet" href="css/animate.css">
(my CSS folder is named public, but I can't see that making a difference...?)
This goes at the bottom of my index page:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
I added the CSS class to an HTML element like so:
<div class="wow"> Content to Reveal Here </div >
Then you're supposed to add the animate.css style to the element:
<div class="wow pulse"> Content to Reveal Here </div >
But I'm missing something, because nothing is working. I've googled this and I'm not the only person who's had issues with WOW.js, but I've tried everything, and now I turn to you.
Under the customize settings on the docs, it suggests advanced settings:
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
I'm thinking since this isn't SO AMAZE at all, there's gotta be another way for me to do this, but still be able to use a CSS animation.
LAST question: how do I make the pulse animation continue? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?
Just put this code in your index:
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>
no need to call for
<script src="wow.js"></script>
couple things are happening here:
</div > is not a proper closing for an html tag.
if WOW is not defined then you most likely didn't include wow.js - make sure you have the right file (see what is inside) and the correct path. When you get stuck - Get rid of ALL console errors and make a minimum, bare bone solution that should work - it is less confusing and easier to find what is causing troubles.
as for repeating pulse animation - just don't. In the old days there were those <blink> and <marquee> tags and they are gone for a reason - you shouldn't use it. Same goes for Comic Sans unless your site is about doge.
now, the following example worked for me:
<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
new WOW().init();
</script>
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>
<div class="wow bounceInUp">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
<div class="wow pulse">
<img src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>
</body>
</html>
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
I can't get a jQuery UI modal dialog it to work as in the demo! Consider this recipe:
<html>
<head>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="/javascripts/jquery-ui.js"></script>
</head>
<body>
<p>First open a modal dialog</p>
<p>Then try to hover over me</p>
<p>And <a onclick="alert('clicked!'); return false;" href="alsobroken"> click me!</a></p>
</body>
</html>
While the dialog is active, the second link is correctly disabled but the third link (onclick) still works! Also, the little browser hand appears when hovering both links. This is not like the demo... what am I doing wrong?
As Pointy points out, this is normally controlled by the jQueryUI CSS. But one can get around it by adding slightly hackish snippet to one's CSS file.
.ui-widget-overlay {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
That way the "shroud" div covers up all buttons and there's no need to use the jQueryUI CSS.
The problem is that you're not including the jQuery UI CSS file(s). You get the CSS file from the download package you prepare at the jQuery UI site, or I think you can get the standard "lightness" one from Google. Without the CSS file, the mechanism can't make the "shroud" layer work. Also you may have noticed that the dialog doesn't look like anything; that'll get better too when you add the CSS files.
http://jsfiddle.net/wxyBG/1/