I was just wondering if you could please help. I am trying to get the
fancybox to load automatically once the page is rendered. However, I
got this error message 't is undefined' at line 18 (/js/fancybox/
jquery.fancybox-1.3.3.pack.js). At the moment, I am using jquery
version 1.4.2
Click me
<div style="display:none">
<div id="container">Fancybox Content Here .... </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#profile').fancybox().trigger('click');
});
</script>
The funny thing is if I take the line below and run it in firebug
console then it WORKS!. Not sure what did I do wrong here. Your helps
would be grateful.
$('#profile').fancybox().trigger('click');
Thanks
I got the same problem. Testing with the unpacked version, i got "loading is undefined" in line 36 (fancybox 1.3.4). So I called "$.fancybox.init();" before triggering and it works correctly now.
Nope th reason is because the fancybox.js is included twice this is the file that has the core of fancy box
I've managed with the similar case in the way like this:
$(".some_wrapper").on('click', function(){
var lnk = $(this).find("a").first();
if (hr && ~cls.indexOf("fancybox-a")) {
$.fancybox(lnk);
}
});
Related
I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});
I have never used JavaScript or CSS before. I have used Actionscript and I find it similar to JavaScript.
I am making a small html page where there is a fadeInUp animation from animation.css
I wanted to do the animation myself, instead of animation.css doing it for me, for practice.
I did everything right, except the animation does not stay at the end opacity, it resets to the css-coded opacity.
I decided to do some javascripting and made this code
(the div that the two animated elements are in is called "toppart")
var beginpart = document.getElementById("toppart");
beginpart.addEventListener("animationend", giveopac, false);
function giveopac()
{
this.style.opacity=1
}
I do not know what is wrong with it (probably something wrong with syntax), but I get this console error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
(anonymous function)
Is the problem with the function or is it with variable? If something is wrong with the event listener, there are about 10 websites that are wrong.
If anybody knows what I am doing wrong, and why it is giving me the error, I would love to know.
If it is still not working it is because in the giveopac event you are trying to access this and adding style to it which is not right.Here this is window object
You might consider changing this
check the following code snippet
var beginpart = document.getElementById("toppart");
// alert(beginpart);
beginpart.addEventListener("animationend", giveopac, false);
function giveopac(event)
{
event.target.style.opacity=1;
event.target.style.background="red";
}
<body>
<div id="toppart">
<p id="first" class="moveupfade">Zane Clark</p>
<p id="subfirst" class="moveupfade">"Keter"</p>
</div>
</body>
Hope this helps;
Found the answer!
I put it after the whole body and changed it to this:
<script>
document.getElementById("toppart").addEventListener("animationend", giveopac);
function giveopac(event)
{
event.target.style.opacity=1;
}
</script>
Thanks to geeky
Make sure that you have your script tags before closing tag of body in html page.
<html>
<body>
<div id="toppart"> <p id="first" class="moveupfade">Zane Clark</p> <p id="subfirst"
class="moveupfade">"Keter"</p> </div>
<script src="myScript.js"></script>
</body>
</html>
#model TripGMap.Models.PhotoModel.Photo
<div>
<dl class="dl-horizontal">
<a id="single_1" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" title="Singapore from the air (Andrew Tan 2011)">
<img src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" alt="" />
</a>
</dl>
</div>
#section scripts
{
<script>
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
});
</script>
}
This is my View. I cant run any js here. As you can see i am trying to run a fancybox on my image but it's not working. It's just sending me to the image source ;/. What am i doing wrong?
I already tried to delete #section scripts thing and so on. Still JS doesnt work. I even added some connections on the View.
Any suggestions? What's wrong? What am i missing?
Thanks for any advice!
Is your js code even outputted in HTML source?
Look at the console, is there an error? If so it should tell you what's wrong.
You included jQuery before or after your code? If after, your code will not work since jQuery is not even initialized when you try to access it via $.
I have some HTML and JavaScript to show and hide a div based on a selection in a dropdown list.
The JavaScript looks as follows:
$('.type-of-display-group').hide();
$('#six-graphs').show();
$('#display-type').change(function () {
$('.type-of-display-group').hide();
$('#' + $(this).val()).show();
});
The HTML looks as follows:
<select class="form-control" id="display-type">
<option value="six-graphs">Six graphs</option>
<option value="sliderFrame">Carousel</option>
</select>
<div id="six-graphs" class="type-of-display-group">
[CODE FOR SIX GRAPHS]
</div> <!-- End six graphs display-->
<!-- The div for the carousel-->
<div id="sliderFrame" class="type-of-display-group">
[CODE FOR CAROUSEL]
</div><!-- End of carousel -->
See this Fiddle to see the code in action.
So the code works in Firefox, but it does not work in IE8. What happens is that both the div's are displayed on top of each other (and I see the broken signal on the lower left corner). When I debug the script with F12 and then use the debugger the code suddenly works...
Does anyone have another way of using the show() and hide() jQuery functions so that I can use this code in IE8?
As ajp15243, Kevin B, satpal and Spudley kindly noticed in the comments console.log can only be used while debugging in Internet Explorer. When I removed one console.log I ran on document ready in another JavaScript file and forgot about, the code worked like a charm.
Unbelievable that this stuff took me whole afternoon.
(first of all, a disclaimer: I'm a JavaScript / MooTools newbie, so it's very likely that the solution may be a trivial miss)
With some help, I was able to put a simple slider to run properly on jsFiddle, using MooTools. It is here -> http://jsfiddle.net/wowenkho/uGcTx/
Now, I want to reproduce it on my own PC. I learn from some threads here that I have to wrap jsFiddle code. In Aptana, I've got the code like this:
<html>
<head>
<script type="text/javascript" src="mootools_v1_2.js"></script>
<script type="text/javascript">
$(function()
{
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
});
</script>
</head>
<body>
<input name="q1_r1" id="q1_r1" type="hidden">
<span id="value">0</span>
<p ><div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" />
</div>
</body>
</html>
I do know that the MooTools version I'm using isn't exactly the same (jsFiddle is using 1.2.5, I'm using 1.2.1). I could try to use 1.2.5 here (and I will, meanwhile), but that's not the purpose, since I have to use 1.2.1. I also do know MooTools is running well, at least theoretically, since I've made the "hello world" before and it worked.
How this is at the moment, I only see the span and a text box, instead of the slider.
I guess I'm missing something trivial here.
Thanks all possible help in advance,
Jaff
There are two problems with your implementation the first is simple take it out of the $function wrapper if you look in the console your domready function is not getting called.
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
The second is that you are actually using a plugin for mootools. If you look at your js fiddle it says using mootools more 1.2.5.1. It's inside the more part that you find the slider class. If you don't have that then slider is not defined. So make sure when you download the core mootools which is required for all plugins that you also check the more and slider boxes. On the mootools website when you go to 1.2.5 download for core go to the more builder and you can add those.