Owl carousel does not work unless I refresh the page - javascript

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>`

Related

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.

Bootstrap tooltip not working though tried answers from stackoverflow

I tried all the solutions mentioned in stackoverflow and nothing works for me.
Head section as
<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
$('[data-toggle="tooltip"]').tooltip();
</script>
and in html
<div class="odd-row">
<strong>10, 000</strong>
Datapoints
<i class="fa fa-plus-circle"></i>
</div>
in the bottom of the page (for performance reason) I included the other files
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.js"> </script>
<script type="text/javascript" src="js/retina.js"></script>
Still the tooltip is not working!! Please help me.
You code is works for me.
Probably something wrong with structure of your html or some error in other part of JS.
Also you can try to put your code in document ready function.
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
Is this what you want? Try demo: http://jsfiddle.net/jdbNa/
For bootstrap you have to put jquery before you put bootstrap.js; so if you're putting bootstrap.js in the header you have to put the jquery.js before it.
Have you tried putting everything on the bottom before the closing body tag? maybe that would work. (I'm on stackoverflow looking for a tooltip solution myself to an issue I'm having)
Maybe try putting bootstrap.js after jquery.min.js, then below the retina.js, put your script to activate the tooltips.

Change Image transition with 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

DatePicker Does Nothing When Clicked

I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.
The top of my web page has this:
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
$(function(){
$("#datepicker").datepicker();
});​​​
</script>
Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.
And down a bit, in that same page, is this:
<td><input type="text" id="datepicker"></td>
When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?
Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.
Script tag must have both opening and closing items. You cannot shorthand close them.
Instead of this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
do this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("#endTime").datepicker();
});
})(jQuery);
</script>
And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.
The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.
What I still don't understand though, is why this code won't work:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#endTime").datepicker();
});
</script>
If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?
The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.

Call href from JavaScript

This is the same question as THIS ONE, I can't answer that anymore, so I'm re-posting it with my account.
Sorry for the mess.
I need a Greasemonkey script that on a page load activates a href link like 'javascript:FUNCTION'.
I've seen this code:
<script language="Javascript" type="text/javascript">
function somescript() {
window.location.href = document.getElementById('ololo').href;
}
</script>
test
<br />
click me
and, while it works on a local page even when using onload, it doesn't work when I use it in my script.
Probably I'm missing something when transferring the code from the body of an html page to a Greasemonkey script.
I hope this time the question is more clear, excuse me for any misunderstanding, but I'm still a beginner with JS.
Solved it like this:
window.location=document.getElementById('foo').href;
Thanks everyone for answering anyway.
<script type="text/javascript">
function somescript() {
eval(document.getElementById('ololo').getAttribute('href').replace('javascript:', ''));
}
</script>
I can see the alert box..
Please note that this will only work when its javascript code into the href attribute...
Will this work for your scenario?
<script type="text/javascript">
function somescript() {
document.getElementById('ololo').click();//fake a click on the link
}
</script>

Categories