Change Image transition with Javascript - javascript

I have got already the css and the html structure, but the javascript it is not working, and the effect is nice, I want to get this image effect: http://www.ustream.tv/new (the blue one)
I have already tried but i dont get it: http://redzer.com.mx/img.html
What am i doing wrong? Please help me.

Add this into your page
<script type="text/javascript">
ustream={};
ustream.timing={};
ustream.timing.firstByte=(new Date()).getTime();
</script>
EDIT
After that $ is missing, it's probably jQuery. Import it than try
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
EDIT 2
You are missing this :
<script src="http://static-cdn2.ustream.tv/packed/l10n/en_us/v6_home:13721527971.js" type="text/javascript"></script>
EDIT 3
Import this :
<script src="http://static-cdn2.ustream.tv/packed/l10n/en_us/v6_header_static_framework:13718193491.js" type="text/javascript">
You can use FireBug plugin in FF to see console errors

Related

Owl carousel does not work unless I refresh the page

Hello my problem with this library that does not load me on the first page, instead if I "refresh" if it loads, and the internet explorer does not work for me. someone has happened something similar. I don't know what I'm doing wrong, I put a link and a capture of the error. THANK YOU https://ccc.es/empresa/ https://ibb.co/3fXLPyH
<script type='text/javascript' src='https://ccc.es/wp-content/themes/norebro/assets/js/libs/owl.carousel.min.js?ver=5.4.2'></script>
I have found a possible solution from another colleague who passed by here I copy it, I don't know if this solution can be improved, but it works for me for now
`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
});
});
</script>`

Javascript files loaded but calls not working

I will be using the same header on two sites, one is already up and running with no issues, the second I can't seem to get my Javascript to work despite it being the exact same code as on the site that does work?
Here is the scripts and the Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script src="js/tinynav.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').carouFredSel({
pagination : "#sliderpagi",
scroll : {
duration : 1000,
pauseOnHover : true
}
});
$('.mobilemenu').tinyNav();
});
</script>
I have checked all the files are where they should be to rule that out or before it is suggested.
Can anyone shed some light on this? Been fighting with it the best part of the day. I'd love to get it working but also understand why the same code works on a different site?
Also to note - I have the same HTML for the Carousel and tinynav as i do on the working site.

Boostrap lightbox not working as expected

I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.

$('body').layout is not a function

I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.
You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
 or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>
Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.

Cannot convert null to object using Twipsy

I'am using a Twitter Bootstraper in my WebAplication, in my materpage i do the following
<%--Referencing jQuery--%>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<%--Referencing the bootstraper script--%>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js" type="text/javascript"></script>
<%--My Script--%>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("a").twipsy();
});
</script>
then in page (Default.aspx) code ia have a single link like this:
text
When a run the page the twipsy (a stylized tooltip) doesnt work.
Look here to see twipsy in action (http://twitter.github.com/bootstrap/javascript.html#twipsy)
I see the "normal tooltip"
Inspecting the console of chrome i see the follong script error
Uncaught TypeError: Cannot convert null to object (bootstrap-twipsy.js:315)
Whats wrong?
Your JQuery version is too old, that might be why.
Another possibility is that your selector is $("a") instead of an id, $("#mylink"). The docs suggest that it should work with a collection, though.

Categories