I want to "show" a message only on click [closed] - javascript

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

Click handler not being executed [closed]

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!" );
});

HTML Text Editor - Simple Code [closed]

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
....

JavaScript/jQuery code in (blogger) post? [closed]

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

Can i add a slide to hidden div when button is pressed? [closed]

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(){ });
)};
});

Script from foreign site cannot be handled inside div [closed]

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);
});
});

Categories