Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
jQuery:
$(document).ready(function(){
$("button").click(function(){
$("#message").show();
});
});
HTML:
<div id="message">
<p> You will be their life line, please take your purchase seriously.</p>
</div>
This is the code that I have but I want to either show a message on click or animate it but I don't want it visible until clicked.
USe css for that
#message
{
display:none;
}
Or you can use jquery too.
$(document).ready(function(){
$("#message").hide();
$("button").click(function(){
$("#message").show();
});
});
Firstly, you need to set display in css:
#message{
display: none;
}
And then call the jquery to show it when the button is clicked:
$(document).ready(function(){
$("button").click(function(){
$("#message").show();
});
});
Using CSS:
<div id="message" style="display:none;">
Using JS:
$('#message').hide();
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am using a simple jQuery code that should log something to the console, but it doesn't do anything. This is my code:
<a class="header_contact" id="trigger_kontakt">Kontakt</a>
<a class="header_search"><img id="trigger_suche" src="someimage.jpg" /></a>
$("#trigger_kontakt").click(function() {
console.log("Kontakt");
(".contact_box").addClass("active");
(".search_box").removeClass("active");
});
The JS code is loaded correctly and it is loaded AFTER the reference of jQuery; but I don't get anything logged to the console - why is that?
Thanks!
your code can't run,the $ is missing.
$("#trigger_kontakt").click(function() {
console.log("Kontakt");
$(".contact_box").addClass("active");
$(".search_box").removeClass("active");
});
.active{
color:red;
}
div{ width:100px;height:50px;border:1px solid #000;display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="header_contact" id="trigger_kontakt">Kontakt</a>
<a class="header_search">Search</a>
<br>
<div class='contact_box'>.contact_box</div>
<div class='search_box'>.search_box</div>
Maybe you should try listening of the document is ready by putting your code in like this
$( document ).ready(function() {
console.log( "ready!" );
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want to create a very simple HTML toolbar that can do bold, italics and underline so when users select a content editable area within the html page that they can change the default text. Been doing loads of looking around on the internet but all i can find is jquery's with a million lines of code and i really don't want to use these as a lot of the code will be redundant.
Anyone know the code / know where i can get the code that is short and sweet and to the point
Thanks
below a simplest sample for ContentEditable. For documentation see https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contenteditable simplest sample</title>
</head>
<body>
<button id="bold">b</button>
<button id="italic">i</button>
<button id="underline">u</button>
<div contenteditable="true">
Textinput here
</div>
<script>
document.getElementById("bold").onclick = function(e) {
document.execCommand("bold", false, "");
};
document.getElementById("italic").onclick = function(e) {
document.execCommand("italic", false, "");
};
document.getElementById("underline").onclick = function(e) {
document.execCommand("underline", false, "");
};
</script>
</body>
</html>
Greetings
Axel
Could be done with jquery using the addClass & removeClass Method
Something like this would be all the code you need:
$( *YourTextElement* ).addClass( "YourCssDefinition" );
This will of course only affect the entire text within the defined YourTextElement
....
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to paste JavaScript/jQuery code in blogger post?
Such like jsfiddle.net/tTman
It didn't work, don't know what I miss?
Please guide me the correct way to achieve my objective .
(Newbie learning)
My guess would be that you did not load the jquery library. Pasting the following code in the HTML view of a blog-post should work:
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
<!-- Loading the required JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
</script>
follow this path:
blogger.com -> Template -> Edit HTML
and past your javascript/jquery codes before </head>
<script type="text/javascript">
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
</script>
see pic:
now!
go to Layout and add a gadget and input your HTML code into that!
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
see pic:
Notice:
you must add Jquery libararies before your Jquery codes
if you want to show this effects only in posts, go to
blogger.com -> New Posts
and in edditor box, click on HTML and past your HTML Codes into that
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Can i add like a slide to the hidden divs when they disappear ?
I want the div to slide when it disappears
Like this:
Button press
The hidden div slides in
Button press again
the div disappears with a slide to the side
How can i do that ?
I recommend you use jQuery
Here is a good tutorial for sliding things in jQuery.
Here is a very simple example using jQuery:
Check the JSFiddle:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Include the jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- Our DOM Structure for the javascript using jQuery -->
<div id="theDiv">This is a div!</div>
<button id="myButton">Click Me!</button>
</body>
</html>
Javascript:
<script type="text/javascript">
// When the page is ready and loaded
$(function(){
// On click of "myButton"
$('#myButton').click(function(){
// "slideToggle" the div
// ie: If hidden show it, else hide it
$('#theDiv').slideToggle();
});
})
</script>
View the jQuery slideToggle docs here
If you've never used jQuery before, check out:
http://learn.jquery.com/
http://thenewboston.org/list.php?cat=32 (Video tutorials)
You can do it with jQuery or another library. You can also write your own function but it would take a while.
The jQuery functions slideUp(), slideDown() and slideToggle() should help you.
well if wanting to do this with pure javascript it would take a bit of coding or you can use jquery and use the baked in animations.
http://api.jquery.com/animate/
button : assuming this to be your button id
data : div which is to be played
//include jquery
$(document).ready(function(){
$('#button').click(function(){
$('#data').toggle('slow',function(){ });
)};
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have got this certain script from a site. I put it on a div. I want to do something like this. http://www.upesspe.org/ But I can't tackle with the script in any way.
http://oil-price.net/dashboard.php?lang=en
Javascript
< script > $(document).ready(function () {
$('#first').click(function () {
$('#wti').slideDown(500);
});
$('.script').mouseLeave(function() {
$('#wti').slideUp(500);
});
}); < /script>
HTML
<div class="script">
<div id="first" class="header_06">WTI Crude Oil</div>
<div id="wti">
<script type="text/javascript" src="http://www.oil-price.net/TABLE2/gen.php?lang=en">
</script>
<noscript>To get the WTI oil price, please enable Javascript.</noscript>
</div>
</div>
DEMO: http://jsfiddle.net/rockyddev/9csnk/5/
PS - I updated
mouseLeave should be in lower case and remove the <script> tags in jQuery. Try with the following code:
$(document).ready(function () {
$('#first').click(function(){
$('#wti').slideDown();
});
$('.script').mouseleave(function() {
$('#wti').slideUp(500);
});
});