Reload jquery script different way - javascript

I have this script
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="../lastfm.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lastBox').lastplayed({
apikey: 'xxxxxxxxxxxxxxxxxxx',
username: 'myusername',
limit: 6,
refresh: 0
});
});
</script>
that affects this div:
<div style="float:right;">
<h3>Recent Tracks</h3> <img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<img src="np.gif" alt="" />
<font size="2"><div id="lastBox" class="lastfm"></div></font>
the script isn't mine, i've taken it from here.
Now the problem is, that the "refresh" function already exists, but i turned it off because it's buggy, while the entire page reload works fine. So I've searched for a reload jquery script, i found some, but they all require a target html or php page to reload, while i just want to reload the div. Possibly, cound you try to look at the javascript here or by downloading it from the source link, and fix the reload there to make it act like the entire page is reloading? I'm quite new to all this. Thanks

Related

Colorbox doesn't open on second click

I have strange problem with colorbox, the code I have is like:
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!
Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.

Javascript working only after the whole page is loaded

I have an image slider in my webpage. The slider is made according to the code in the below link.
http://www.htmldrive.net/items/show/37/Dot-Slider-simple-easy-to-use-images-slideshow-jquery-plugins
I have a CSS class and the whole code looks like this.
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="css/webwidget_slideshow_dot.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#demo2").webwidget_slideshow_dot({
slideshow_time_interval: '5000',
slideshow_window_width: '256',
slideshow_window_height: '256',
slideshow_title_color: '#FFF',
soldeshow_foreColor: '#999',
});
});
</script>
</head>
<body>
<div class="ads2">
<div id="demo2" class="webwidget_slideshow_dot">
<ul>
<li><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></li>
<li><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></li>
</ul>
<div style="clear: both"></div>
</div>
</body>
I have a CGI scripts using Perl that runs for 5 minute. But the javascript is not working for these 5 minutes and image allignment is not clear during this time. After the page is loaded the javascript works fine. However the Javascript part is working fine because I have tested with an alert in javascript code and it works at the start of the page. The problem is when I call the Javascript using div it does not works.
$(/*code*/) is a shortcut for ready() which means that the code in $(/*code*/) won't be executed until the HTML document has been loaded.
Is the 5 minute page load time is for some omitted content after your #demo2 div but before the closing body tag?
The fact that you have wrapped your function in $(...) means it won't be invoked until the entire DOM (Document Object Model) is loaded, parsed and ready.
One thing to try would be to move that script block into the body of the html, after the #demo2 div. Also remove the "$(function() {" wrapper from the code. Not familiar enough with the slideshow widget you are trying to use to know if it will work without the entire DOM being ready, though...

How to implement or create a Magnific Popup?

Intro:
This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.
What I want to know:
I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.
What I have done before I came to StackOverflow:
Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.
Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - on the Lightbox Gallery section.
HTML Structure I have tried, and failed:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.
I hope someone out there would be kind enough to help me with this query.
Relevant queries:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
Thanks again! I would really appreciate your thoughts!
Just add delegate: 'a' to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>

NIVO SLIDER Trouble

i am having some loading problems with my slider. http://www.novaprogramming.com Sometimes it loads, and sometimes it does not. I really do not know why.
Your site render like this
<img src="nivo/images/02.png" alt="">
Try the img tag like this
<img src="/nivo/images/02.png" alt="">
In your page remove this code
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
its not needed

jQuery: is there a way to .LOAD() content that has script references in it?

I have 2 files. One called foo1.php and the other called foo2.php.
Contents of foo1.php:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
<div class="yoxview">
<img src="files/Desert.jpg" alt="First" title="First image" />
<img src="files/hydrangeas.jpg" alt="Second" title="Second image" />
<img src="files/Jellyfish.jpg" alt="Third" title="Third image" />
</div>
Contents of foo2.php:
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$('.bar').load('foo1.php');
});
</script>
<div class="bar">this text will be replaced</div>
When I go to foo2.php I get a blank white page with a never ending loading favicon. I think this has something to do with loading the script:
<script type="text/javascript" src="yoxview/yoxview-init.js"></script>
in foo1.php since the contents of that page are passed through the .load() function. When I remove that script reference foo1.php loads just fine. I don't think this problem is specific to that particular script. If I try to load any page with a script reference the same result occurs (the blank page/loading favicon).
Is there a way to load content from another page that has script references?
EDIT
Here's the link to the problem script:
http://www.yoxigen.com/yoxview/yoxview/yoxview-init.js
Try using this to intercept the document.write, it's worked for me in the past: https://github.com/iamnoah/writeCapture

Categories