I have currently implemented this image slider http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html on a site but for some reason I get the error message "mc is not defined".
Unfortunately I can't show a link to the site since it's not accessible to the public yet.
When I look in the javascript file I can see that the mc variable is not defined anywhere. But when I strip it out I just get another error saying "css_ims is not defined". If I uncomment this line I get yet another error message now saying "css_cims is not defined". So far the gallery is still working but when I uncomment the last error it breaks.
I'm really lost on what I can do about this to fix it.
I'm sorry that I'm not able to post a direct link to the page but the source code for the JavaScript can be found on the site with the tutorial in the beginning of this post.
Any ideas or suggestions are much welcome.
You should remove the line with: mc.init();
and also the whole function from line 53:
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
Few days ago I integrated the same slider on one of my sites. The error/issue is with:
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
From line 52 to line 60 needs to be removed my guess is that this indeed was planned for something else, or the option to change colors.
Thanks,
Emil
Go back to the demo site and pull down the scripts.js from the live demo, you'll notice that one does not reference mc at all, there is no mc.init() call at all. The article writer probably linked to a different version of that file.
Related
At the moment we've got a big problem (temporarily)!
In our shop we're using a 3rd party solution for promoting and searching for products.
We have around 3600 products which got harvested in the wrong way - the base-url had an extra forward slash (www.sceneryworkshop.nl//) so now all products are called the wrong way and end-up in nomansland. We started a new data-sync, but it takes a lot of time to get in sync.
So I'm looking for a temporarily solution, even if it's dirty!
I don't have access to .htaccess or other server components. The shop runs on a closed-source platform (Lightspeed HQ) which is based on TWIG.
Anyone who knows how to change or redirect to the correct url? Javascript maybe?
The sources are located and called from a lot of places, so the only solution would be a global function that checks and corrects the url's.
I really hope someone has an answer for me :-)
Hi i have a solution assuming that jquery is loaded after the dom is rendered
$(document).ready(function() {
$('a').each(function() {
$split = $(this).attr('href').split('com//');
$(this).attr('href', $split[0] + 'com/' + $split[1]);
console.log($(this).attr('href'));
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
Note:
If you like to test the link in the snipped; hold ctrl and click on the link.
Update
Ok. i have read your comment and try some stuff in the inspector from your website. The following solution works!
$('body a[href^="https://www.google.com//"]').each(function() {
$x = $(this).attr('href').replace('com//', 'com/');
$(this).attr('href', $x)
console.log($x);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Jquery
Java
J
What i do here is simple, first i search every a element witch contains the following url: https://www.sceneryworkshop.nl//. then replace them with the correct url.
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)
I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).
(i've commented out the jquery as this is already loaded for my wordpress theme.
The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?
once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.
Image management: nextgen gallery
image layout: Justified Image Gallery
URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/
If you open the console on this page - you'll see that there are two javascript errors.
1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71
I looked into the source code of your page and on line 71 you have this:
$(document).ready(function(){
$('a').nivoLightbox();
});
This means that jQuery is not working. You need to use a no-conflict wrapper.
2.Uncaught TypeError: Object [object Object] has no method 'orbit'
On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured.
To avoid such mistakes you need to check if the block is on the page, possibly like so:
var home_slider = $('#featured');
if( home_slider [0] ) { //if jQuery object is not empty
home_slider.orbit({
//yor params here
})
}
If you get rid of these errors - you'll most likely see the nivo-lightbox :)
I'm using cognos report studio and I came to an error on my prompt page. I got my coding to work right(I tested it on a blank page), but I noticed theres a yellow explanation point on the bottom left, which doesn't allow me to continue what I'm trying to do.
Here is a screenshot:
The error seems to be coming from my html tag in the prompt page.
Here is my coding:
<script type="text/javascript">
var theSpan = document.getElementById("FiscalYear");
var theSelect = theSpan.getElementsByTagName("select");
theSelect[0].options[2].selected=true; //This will make default value in prompt to be the first item after line, change the value '2' for other item
theSelect[0].options[0].text = 'Fiscal Year';
listBoxBusinessDate.checkData();
</script>
My error should be coming from there, I just can't figure out why. Any ideas on what it could be? Thanks.
This is a JavaScript error. The variable you are trying to use "listBoxBusinessDate" is null / undefined, so when you try to call a method on it (.checkData()), you get this error.
Where is this variable defined (its not in the snippet you provided, but could be defined earlier in the file)...?
The code that produces the headache for me is rather simple:
$(function(){
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>');
})
I have the above code in my head and a div with id 'test' in the body. Now my problem is that the page produces two alerts when the image is loaded, but I expected it to produce only one as the 'onload' should be triggered only once- The way it happens when I add the image manually without any javascript..
See the fiddle I made at: http://jsfiddle.net/9985N/
Any help/explanation is greatly appreciated...
UPDATED (Because some people don't believe me, lol)
Because .append creates the node first and then moves it to its appropriate position. Try appending the element first then adding its attributes as follow:
$(function() {
$("#test").append(
$("<img />").attr({
src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
onload: "alert(\'hi\')"
})
);
});
My answer does not "avoid" the problem, it answers it very directly. If you open the jQuery.js file in uncompressed format you can clearly see that .append creates the node on the document which is when the onload event is first called and then shifts it into position which is when it gets called again. Perhaps shift is the wrong word, forgive me as vocabulary is not my strong suit. However if you follow the code you see its creation and its movement, however the same is not said for using append again to move it, as the node is already created it simply moves from one element to another with no respark of onload. As I said, not sure best terminology, but it's very easy to follow along on the jQuery.js.
Don't believe me? Just tested the following fiddle in MSIE9, FF12, & GoogleChrome20 with 0 problems.
jsFiddle
just FYI, it's not really a horrible practice, but I see people write whole lines of HTML in jQuery all the time and that kind of defeats the purpose. It's a library with many books to read on purpose. Sometimes a complete line of HTML might seem easier, but it may not be faster as it doesn't follow all the great layout work that has been done for you. The idea is to "Write less, do more" and this includes HTML. After all, if you were gonna write the whole line of HTML, why use jQuery at all when you could just PHP it in!? :P Just a thought.
or this:
var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){
$('#test').append(img);
alert('loaded');
});