I am trying to append a span element in a div tag using the below code .
$( document ).ready(function() {
$(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
});
sometimes it works and adds the element.
But sometimes it doesn't load the element.
I am new to jquery so any help would be appreciable
Thank you
Below is what you want, op (shahzad) was including third party widget on page load, as it is a third party widget sometimes it will load early or later, so, needed below code,
$( document ).ready(function() {
$(document).on("click", "[data-state=closed]" , function() { $(this).data('state', 'opened').attr('data-state', 'opened'); });
myVar = setInterval(function() {
if($(".rocketchat-widget").length){
$(".rocketchat-widget").append("<span class='tooltiptext'>Chat button</span>");
clearInterval(myVar);
}
}, 1000);
});
Related
I'm getting some html from a webservice that I'm appending to a div. This is my success function:
function SucceededCallback(result) {
// get the div element
var RsltElem = $(".placeholder");
// update div inner Html
RsltElem.append(result);
$('.loading-gif').hide();
}
Is there any way I can get .append() not to display until the browser is finished loading and painting it?
I'd rather not use .append(result).slideDown(n) as n could be anything, depending on what the webservice sends me.
Thanks in advance
Consider using
$( document ).ready(function() {
...
});
like so:
$( document ).ready(function() {
//get the div element
var RsltElem = $(".placeholder");
//update div inner Html
RsltElem.append(result);
$('.loading-gif').hide();
});
I don't know what you are painting and when it will complete, so you could also use this:
$(window).bind("load", function() {
// code goes here
});
Code inside the function only runs when the entire page has loaded.
$(window).on('load', function() {
//everything is loaded
});
I have a DIV with id: TEST that I can drag using jQuery UI. All works, but as soon as I remove it and load the DIV into the HTML dynamically (well to specify more: using SSE to load the DIV into the HTML), the DIV can't be dragged. This is because the jQuery is loaded before the DIV is. How to fix this? Since I use SSE, the DIV is loaded several times over a period of time.
The jquery code:
$(function() {
$( "#TEST" ).draggable({
containment: "parent"
}).css({'cursor': 'all-scroll', 'z-index': '5'});
});
The DIV TEST is loaded into antoher DIV called dragZone
<div id="dragZone" name="dragZone"> [div TEST is loaded here] </div>
The JS that loads the SSE:
//HTML5 SSE(Server Sent Event) initilization
this.initSevr=function(){
sevr = new EventSource('test.php');
sevr.onmessage = function(e){
if(oldata!=e.data){
dragZone.innerHTML+=e.data;
oldata = e.data;
}
};
};
So how can I drag the DIV again? The Div is put into the HTML using SSE, this all works.
You will probably need to move your draggable code into the loading event, like this:
//HTML5 SSE(Server Sent Event) initilization
this.initSevr=function(){
sevr = new EventSource('test.php');
sevr.onmessage = function(e){
if(oldata!=e.data){
dragZone.innerHTML+=e.data;
oldata = e.data;
$( "#TEST" ).draggable({
containment: "parent"
}).css({'cursor': 'all-scroll', 'z-index': '5'});
}
};
};
This is assuming the DOM is updated immediately after innerHTML is used; if not it may be necessary to use a short setTimeout to make it draggable.
I think you forgot a quote, try to change from
sevr = new EventSource('test.php);
to
sevr = new EventSource('test.php');
So I want my contents to change its appearance depending on what button i click (grid view and list view) ..
I did some research and most of the stuff can be done using jquery. But i want to use only javascript.
My questions are:
what elements should i use? I am currently patterning (if this is even a real word) my app by using semantic ui.
I found this snippet here in stackoverflow http://jsfiddle.net/LJf9p/794/
but I can't seem to make it run, i mean it runs but it doesnt change appearance depending on button click if i put on html, do i have to add some more stuff? it works on the fiddle but not when i run it on my local browser. thanks
$('button').click(function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
please add
http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
and
$( document ).ready(function() { });
it works
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('button').click(function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
});
</script>
I am using a plugin in my site called AnimateScroll, it works fine but I want the page to scroll to the element (with effects) as and when the page loads.
I tried the following code:
$(
$("#element-id").animatescroll();
);
But its not working?
The correct way for DOM ready handler is to wrap your code inside$(document).ready(function() {...}) or $(function() {....}); not $();, so you can use:
$(document).ready(function() {
$("#element-id").animatescroll();
});
or:
$(function() {
$("#element-id").animatescroll();
});
I am combining two scripts together: a scroller and a content fader. When I swap the content (fading), div's with a lot of content make the scrolling div super long. I was reading on the plugin demo for content scrolling (http://manos.malihu.gr/jquery-custom-content-scroller) that you can use $(selector).mCustomScrollbar("update"); when loading different content to make the div adjust accordingly.
I know that code needs to go in my fading script somewhere, but where? Here is the fading script, where would it go?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('.clickme').bind('click', function(e) {
e.preventDefault();
$( "#mediaswap div" ).fadeOut();
$( "#mediaswap div" + $(this).attr('name') ).fadeIn();
})
});
}
})(jQuery);
$(function() {
$('#mediaswap').Fader();
});
});//]]>
</script>
I've answered your comment on the post but I'm writing it here too.
Since you fade in/out divs, you have to call the update method as a callback to the .fadeIn() function, so it updates the scrollbar after the animation is completed:
$( "#mediaswap div" + $(this).attr('name') ).fadeIn(function(){
$(this).mCustomScrollbar("update");
});
Additionally, there's an extra option parameter you can use when you initially call the plugin, that checks content size and updates the scrollbar automatically if it changes:
$("#mediaswap div").mCustomScrollbar({
advanced:{ updateOnContentResize:true }
});
Using the updateOnContentResize option, depends on the rest of your code (where you call the plugin), so I recommend using the first method.
I recommend checking the div to see if it's animated using something like this:
var wait = setInterval(function() {
if( !$("#mediaswap div").is(":animated"))
{
clearInterval(wait);
//put the code in here because it checks
for whether the DIV is currently animated.
}
}, 200);
You can change the interval if it takes the animation longer to complete the animation.