Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
This should be super simple. The first code block works, but when I wrap it in a function and attempt to call the function, it doesn't work.
This Works:
$(document).ready(function() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
});
This Doesn't Work:
$(document).ready(function() {
function hideatstart() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
UPDATE: After looking at the accepted answer, I was able to get working code. It involved not having any spaces between the lines of code, which would allow p tags to be inserted. Best practice would be to remove the JQuery to a separate script, which I will do. The following code works:
$(document).ready(function() {
function hideatstart(){
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
I inspected the HTML on your live site and found that your snippet is outputted like this:
<div class="art-postcontent">
<!-- article-content -->
<!-- [snipped] -->
<p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><br />
<script type="text/javascript">
$(document).ready(function() {</p>
<p> function hideatstart() {</p>
<p> $("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}</p>
<p> hideatstart();
});
</script></p>
<!-- [snipped] -->
</div>
As you can see, WordPress's wpautop filter wrapped your lines inside paragraphs.
If you need to inject a script somewhere, you better do it with a plugin or a theme function and not by pasting the code in a WordPress post or widget. All regular WordPress content types are escaped to prevent such possibly malicious injections. It seems like you're using a custom art post type, which normally gets a similar treatment. There are ways to prevent the content from being escaped, but you should seriously consider moving your script code somewhere else.
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 4 years ago.
Improve this question
I have a conditional statement that creates a link in an empty id tag (#demo)
The link appears fine on the page when the conditions are met but I am unable to edit it using CSS.
I have tried setting an <a> tag and doing this in CSS:
a{
text-decoration-none;
}
I have tried the same for the id (#demo). I think the issue is that the element does not exist in the standard HTML, only in the JavaScript. Any ideas?
let zone10btitle="Zone 10b";
let zone10blink =zone10btitle.link("zones/zone10b.html");
if(c10b.includes(acodevalue)==true ||
c10bcities.includes(acodevalue)==true){
document.getElementById("demo").innerHTML=zone10blink;
}
link() is not part of the standard but should be supported by all common browsers see here
It returns a string embedded in an <a> tag, so your CSS should match the generated link.
Your CSS rule needs to be a {text-decoration: none;} though, so if what you wrote in your answer is not a typo, you got your mistake: a{ text-decoration-none; } is invalid CSS.
CSS Rules need to be in the form of <selector> { <property>: <value>} with appropriate subsitutes for <selector>, <property> and <value>.
Btw, going for the id demo would affect the parent of the link, not the link itself, as you set the innerHTML of the parent to be the link.
In this link you also have an example code you can run very similar to yours.
You can find similar code snippet here and it styles the a link. Not sure if you are using inline styling or external css.
<!DOCTYPE html>
<html>
<head>
<style>
a{
text-decoration: none}
</head>
</style>
<body>
<p>Click the button to display a string as a hyperlink.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "Free Web Building Tutorials!";
var result = str.link("https://www.w3schools.com");
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Credit: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_link
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 4 years ago.
Improve this question
<script>
function addMoreAns() {
$(".add").append("<h1>Hi</h1>")
}
</script>
It is my jquery tag in javascript function.
jquery tag don't work under javascript function
You must have three things for your code to work:
You must make sure to have the JQuery library referenced prior to your use of any JQuery code.
In the HTML, you must have an element that is allowed to contain content with an add class.
You must invoke your function somehow. Just writing a function isn't the same thing as running it. You have to decide when the function should run and set up your code to invoke it at that point.
In the example below, the function is invoked every time the button is clicked.
document.querySelector("input[type=button]").addEventListener("click", addMoreAns);
function addMoreAns() {
$(".add").append("<h1>Hi</h1>")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Click to Add">
<div class="add"></div>
You need to load the jQuery library in the head of your page
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
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 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);
});
});