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

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

Related

Div tag content not showing on click [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>

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

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

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

Keep a running total [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 a list of items in my app that have radio buttons on them. As I change the settings on the radio buttons, I want to update the running total at the bottom of the page. How do I set up the running totals?
This has some flaws to it, but it should get you started:
<html>
<head>
<script>
var total = 0;
function count(input) {
if(input.checked) {
total++;
}
document.getElementById('total').innerHTML = total;
}
</script>
</head>
<body>
<input type="radio" id="radio1" onclick="count(this);"/>Radio 1
<span id="total">0</span>
</body>
</html>

JQuery function not executing [closed]

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.

Categories