Changing jTicker message with jQuery - javascript

Hey so I'm trying to use jTicker to say messages that can react to user input.
The way jTicker works, it affects text between html element tags.
In this example, I'm trying to use jQuery to modify the text between a certain set of tags that is being tickered? by jTicker. The problem is that whenever I try to change the text, jTicker only uses the text that was between the tags when the page first loaded and not the new text.
How can I fix this code so that the text that jTicker is affecting can be changed on the fly?
Javascript:
<script src="jquery.jticker.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#messageId").ticker({
rate: 40,
delay: 900,
transition: "fade",
});
$(".stop").click(function(){
$("#messageId").trigger("stop");
return false;
});
$(".play").click(function(){
$("#messageId").trigger("play");
return false;
});
});
function test() {
$('#theMessage').text('New text!');
}
</script>
Html:
<body>
<div id="messageId">
<p id="theMessage">Old text</p>
</div>
<div>
<input type="button" value="Test"
class="play" onClick="test();" />
</div>
</body>

function test() {
$('#theMessage').text($("#messageId").text());
}

Related

How to make entered text appear on the screen

Say I have a <textarea> element in my HTML, and I have a send button. When you press that send button, the text in the <textarea> element should appear on the screen.
I tried putting this JavaScript code in my head section:
<script>
function displayText(element, change_to) {
document.getElementById(element).innerHTML = document.getElementById(change_to).innerHTML
}
</script>
And this is the body section:
<body>
<p id="msg"></p>
<textarea id="enterMsg"></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
But that didn't work.
You should use value property for the textarea element. I will also suggest you use innerText or textContent if the value is plain text (not htmlString):
<script>
function displayText(element, change_to) {
document.getElementById(element).textContent = document.getElementById(change_to).value
}
</script>
<body>
<p id="msg"></p>
<textarea id="enterMsg"></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
textarea don't have innerHTML, you should use .value instead

If div in iframe has child with specific class do

I want to add a class to the parent if the child has a specific class.
The problem: It's in an iFrame and I'm not very good with jQuery. It don't really has to be jQuery, any other way would be also great. Just notice: The iFrame is on my domain, but I can't access it, because it's generated by a plugin.
If you have any ideas how to fix it, I would appreciate it
My HTML looks somewhat like this in devtools:
<iframe src="#" id="iFrameResizer0">
<div class="book-day">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
and my jQuery:
$(document).ready(function () {
$("#iFrameResizer0").contents().find(".book-day button")
if ($('.book-day button').hasClass('disabled')) {
$(".book-day button").parent().addClass('disabled');
}
});
if everything works correct I want my html looks like this afterwards:
<iframe src="#" id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
</iframe>
Devtools:
NOTE: this code has to be executed AFTER the iFrame has loaded and rendered. If you execute this in the head of the parent page without wrapping it in $(function() { ... }), it will not work
You have more than one book-day, you will need to loop:
$("#iFrameResizer0").contents().find(".book-day button").each(function() {
$(this).parent().toggleClass('disabled',$(this).is('.disabled'));
})
or perhaps
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
PS: To remove them you do not need to give them a class:
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove;
})
If you still have issue with the timing, try this script right after the iframe tags - right after the </iframe>
<script>
$("#iFrameResizer0").on("load",function() {
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
})
})
</script>
UPDATE: Alternatively drop the iFrame completely:
Replace the iframe tags with <div id="iFrameResizer0"></div>
and add
<script>
$("#iFrameResizer0").load("/wp-json/ssa/v1/embed-inner?integration.../type/Reservierung",function() {
$("#iFrameResizer0").find(".book-day button.disabled").each(function() {
$(this).parent().remove(); // or .addClass('disabled');
});
});
</script>
Example pretending your iframe.content() works as expected (same origin)
$(function() { // on page load. This might STILL be too early
$("#iFrameResizer0").contents().find(".book-day button.disabled").each(function() {
$(this).parent().addClass('disabled');
})
});
.disabled {
background-color: grey
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iFrameResizer0">
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
<div class="book-day">
<button class="active">Button Text</button>
</div>
<div class="book-day disabled">
<button class="disabled">Button Text</button>
</div>
</div>
You don't have to check for every button if it has disabled class or not. You can directly select those button having disabled class.
In Javascript, you have to iterate for all the buttons having disabled class, and add disabled class to it's parent. However, in jQuery, as you can see, you can achieve that, without using any loop.
For JavaScript :
$(document).ready(function() {
var all = document.querySelectorAll('#iFrameResizer0 .book-day button.disabled');
all.forEach((item) => {
item.parentElement.classList.add('disabled');
})
});
For jQuery :
$("#iFrameResizer0 .book-day button.disabled").parent().addClass('disabled');
Since the iframe is observing same-origin policy, This is possible.
First you need to select your iframe element using the following JS
var iframe = document.getElementById('iFrameResizer0');
Now you need to get the content in your iframe
var iframeContent = iframe.contentDocument;
Then select elements inside your Iframe which you wish to modify
var iframeElement = iframeContent.getElementsByClassName("book-day");
var i = 0, ilen = iframeElement.length - 1;
for (var i = 0; i < ilen; i++) {
var button = iframeElement.getElementsByTagName("button");
if(button.className == 'disabled')
{
iframeElement[i].className == 'disabled';
}
}
Then hide your element using CSS display:none property
.disabled {display:none;}

Making a try it yourself HTML and CSS program

I am making a try it yourself HTML and CSS program, like you would see on w3schools or other websites. I was wondering if there was a way to make another button that would just display the HTML and ignore the CSS instead of having to have the user type in both. Here is the code that I have, so I still want to make a toggle button that toggles the CSS off and on, but I am unaware on how to do this.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style> textarea {
height: 100px;
width: 1000px;
} </style>
</head>
<body>
<form id='assignment5' method="post" action="assignment5.html">
<table>
<tr><td><textarea name="html">Enter HTML Here</textarea></td></tr>
<tr><td><textarea name="css">Enter CSS Here</textarea></td></tr>
</table>
<input type="submit" value="Launch">
<input type="reset">
</form>
<div id='content'></div>
</body>
</html>
<script>
$(document).ready(function(){
$('#assignment5').submit(function(e){
e.preventDefault();
$('#content').html( $(':input[name=html]').val() );
$('head').append( '<style>' + $(':input[name=css]').val() + '</style>' );
});
});
</script>
Yes, it is possible..
First, you just have to create an element to listen to for that purpose..
something like(using a separate button):
<input type="button" value="Html only" id="html_only">
then this jQuery script to handle the click event:
// this will just output the html ignoring the css textarea
$('#html_only').click(function(e){
$('#content').html( $(':input[name=html]').val() );
});
or this way (using a checkbox that acts like a switch):
<input type="checkbox" name="css_switch" id="css_switch"/> apply CSS?
and change your script to this:
$('#assignment5').submit(function(e){
e.preventDefault();
if($("#css_switch").is(":checked")){
// output from html textarea only
$('#content').html( $(':input[name=html]').val() );
}
else{
// output from html textarea and append input from css textarea
$('#content').html( $(':input[name=html]').val() );
$('head').append( '<style>' + $(':input[name=css]').val() + '</style>' );
}
});
USING button DEMO
USING checkbox DEMO

Jquery Animation : how to make text appear when a element has changed color or styles

Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/

JQuery - Problem with Modal Dialog after reload page in div

take a look to the example:
example.jsp:
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").load("example_1.jsp");
});
});
</script>
<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>
example_1.jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#a").button().click(function() {
$("#a_form").dialog("open");
});
$("#a_form").dialog({
autoOpen: false,
height: 480,
width: 625,
modal: true
});
});
</script>
<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
Hello!
</div>
I load example.jsp and I press the button "RELOAD".
Then, in "mainContent", appears the button "MODAL", that open a modal dialog.
But if I press again "RELOAD" button and then "MODAL" the MODAL DIALOG doesn't appear anymore!
why?
where am i doing wrong?
That is because :
<input id="a" type="button" value="MODAL" />
Is using an ID.
When you run load again you are creating another input with the id=a which is not allowed.
Try using a class identifier instead of an id
The problem might be because the script block of example_1 is ignored because it is loaded dynamically into the page.
So what you need to do is to move that script block to example.jsp and use .live() for '#a' instead of .click()
$("#a").button().live("click", function() {
$("#a_form").dialog("open");
});
Before you load/reload the main content try to empty it and then load.
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").html('').load("example_1.jsp");
});
});
</script>

Categories