I am trying to implement the following qTip tooltip script on my page:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
I got the script directly from the JS Fiddle documentation page, but unfortunately, the script doesn't work on JS Fiddle either. I am sure there is a typo somewhere in this, but I don't have the JS skills to find it.
Can someone help me to correct this script?
thanks
I like qTip2 but the one thing that I hate about it is that its documentation blows. The creator gives sample code but omits certain necessary parts of it which makes it confusing. He also includes broken fiddles like the one you gave above.
Not to mention, that fiddle is unnecessarily complicated if he is just displaying one tooltip.
I created a very basic example of a qTip2 at the link here: http://jsfiddle.net/ah653at2/1/
I hope you can use this instead to gain a basic understanding of the library.
HTML:
<a id="test">A very basic tooltip example</a>
JavaScript:
$("#test").qtip({
content: {
text: 'This is some tooltip content',
},
});
Related
I am beginner programmer with CasperJS and I love to try new things with scraping. My problem:
I am able to login to youtube and like a video, but I cannot find correct XPath for youtube comment like button.
http://tinypic.com/r/2vayr83/8
Here is the part I am stuck on, I always get error:
wait timeout of 5000ms expired exiting-
so I guess that's because of the incorrect XPath and I want to do that on a specific comment. How could I do that?
casper.waitForSelector(x('//*[#id="update-z132gvlzosmchn30f225wng5gluzgbs5o04"]/div/div/div[1]/div[4]/div[3]/img'), function() {
this.click('//*[#id="update-z132gvlzosmchn30f225wng5gluzgbs5o04"]/div/div/div[1]/div[4]/div[3]/img');
this.capture('like.png')
this.echo("liked");
});
The Youtube comment thread is loaded in an iframe, so you need to change into the iframe first, before doing something in it. You can use casper.withFrame() step function to do this. Keep in mind to select the correct iframe, because there are multiple iframes.
The other thing is that nearly all CasperJS functions only accept CSS selectors by default, but you use an XPath expression for the click. You have to use the XPath utility that CasperJS provides to tell CasperJS that the passed string contains an XPath expression and not a CSS selector.
Another problem might be that the iframe is only loaded once it is scrolled into view. You might need to scroll to the bottom. CasperJS provides the scrollToBottom() function to do this. You will also need to wait until the iframe is put into the page after you scroll down.
Complete (untested) script:
var casper = require('casper').create();
casper.start(url, function(){
this.scrollToBottom();
this.scrollToBottom();
});
casper.waitForSelector('.comments-iframe-container iframe', function(){});
casper.withFrame(1, function(){
var link = '//*[#id="update-z132gvlzosmchn30f225wng5gluzgbs5o04"]/div/div/div[1]/div[4]/div[3]/img';
this.waitForSelector(x(link), function() {
this.click(x(link));
this.wait(1000, function(){
this.capture('like.png')
this.echo("liked");
});
});
}).run();
firstly i understand that there are many questions on here about the same subject and yes i have read most of them, unfortunately i just cant seem to process the information to make it work,so i was hoping someone could possibly point me in the right direction to help me solve my issue out??
firstly the set up of the directories of my site, i have all different sections that are 'included' amongst each other to keep my site more simple when changes are needed, but my point is.. in my overall footer.php page i have 2 just before the tag they are
<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/general.js"></script>
the general.js file is from a tutorial i seen which made it alot easier to have all the things in the same one place of there own.
So what i want is to refresh/reload a div id="menu_bar" with a navin which is for my menu at the top of the screen, on there i have a inbox system set up and that is the reason i would like to have this auto refresh, so it will basically show me i have a message instead of me just pressing F5 to check. plus i plan making a notification system and im guessing this would be an appropriate way to show that i have notifications... So as im very very VERY new to jquery, AJAX and most other things this stuff doesnt make too much sense, i get a bit, but still... so the code i have seem to put together from a variety of tutorials and here is what ive got ...
$(document).ready( function(){
$('#menu_bar').load('includes/menu.php');
refresh();
});
function refresh()
{
setInterval( function() {
$('#menu_bar').fadeOut('slow').load('includes/menu.php').fadeIn('slow');
refresh();
}, 3000);
}
So can someone help me by showing where ive gone wrong and WHY ive gone wrong so i can try to understand where i went wrong and how i should fix it? cheers
You shouldn't call refresh() inside the setInterval function,or use setTimeout instead
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
I am trying to run a function on page load but its not working. I've added it in every place I can think of and the ONLY thing that works is:
$("html").mousemove(function(event) {
$('#project_thumbs_container').masonry('reload');
});
I've tried delays but I have resorted to the hacky above method :(
Does anyone have any suggestions as to why my function won't run?
UPDATE:
I am using masonry for jquery. My problem is when I load a page that uses masonry with ajax, it shows them in a single column. $('#project_thumbs_container').masonry('reload'); resets it properly, but it only works using the above mousemove method.
It sounds like you have one of two problems:
1) Malformed HTML which is causing an error, which isn't allowing the code to parse correctly when using the document onReady syntax: $(function() { ... });
2) Masonry might be loading asynchronously, which means that the "onReady" callback might not be the one that you want to be using. Your Ajax call would look more like this:
$('body').load('index.html', function() {
$('#project_thumbs_container').masonry();
});
Unless someone has a better answer, I just put the code in my fadeIn(); snippet after ajax call is complete:
this.fadeIn('slow', function() {
$('#project_thumbs_container').masonry('reload');
});
Seems to work.
Try something like this.
$(document).ready(function(){
$('#project_thumbs_container').masonry('reload');
});
You can put this code anywhere on the page and it should work, as long as the dependencies have already been loaded.
Just put your function in this
$(document).ready(function() {
// Handler for .ready() called.
// your function
});
when your page load the function will execute
I'm using this tickertype jquery plugin:
http://www.hungry-media.com/code/jQuery/tickerType/
And I'm trying to attach a hover effect to a link, the website can be found here:
http://dougmolineux.com/json/
But it's simply not working, my hover code looks like this:
$(".mylink").hover(
function () {
alert("test");
console.log("is this working?");
//$("#test").html($(this).attr("id"));
//$(this).addClass("hover");
},
function () {
//$(this).removeClass("hover");
}
);
And my link looks like this:
"home": "example glossary",<br />
When I hover over the link nothing happens, is something wrong with my code? I have the js inside A document.ready function. I think that it may have something to do with the inclusion of the tickerType plugin, but its possible something maybe wrong with me code :)
Any advice would help!
Thanks
It is because the typewriter code serializes the HTML, therefore dropping any events attached to the elements.
It works with the effect off.
You can use the live() method to bind your events and it works. This works because it doesn't directly attach events, just lets events bubble to document where thier origin is checked and if it matches the selector, the event is fired.
jsFiddle.