javascript tab function not working - javascript

I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX

What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.

I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.

Related

jQuery plugins conflict and script declaration order

I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless
First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css

JavaScript working on fiddle but not in site

Good day!
I have recently acquired a code and was passed on using fiddle. It works fine on the fiddle but when I am trying to implement it on my site.
Head tag contains:
<head>
<title>NQA Insert</title>
<script type="text/javascript" src="NQAa.js">
</script>
</head>
While NQA.js contains:
$('#bill50').on('change', function() {
var date30 = new Date($(this).val());
date30.setDate(date30.getDate()+30);
var date20 = new Date($(this).val());
date20.setDate(date20.getDate()+60);
$('#bill30').val(date30.toJSON().slice(0,10));
$('#bill20').val(date20.toJSON().slice(0,10));
});
Note 1: If you input a date on bill50, the value on bill30 and bill20 also changes.
Note 2: I am implementing this on a php page. Maybe this helps...
Why is it that when implementing it on the site, it doesn't work at all? Is there anything wrong in my calling of the jscript..?
you need to include the jQuery library, as you can see in your jsFiddle he's including jQuery 1.8.3, you should add it in your "head" tag just before the js script you bought.
You'll get something like this:
<head>
<title>NQA Insert</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
<script type="text/javascript" src="NQAa.js">
</script>
</head>

Globalization in JQuery is not working

I have been following theScott Hanselman Tutorial on Globalized Javascript Validation. It is a great tutorial wich made me understand a topic I'm not that familiar with a bit better. The only problem is that it's a bit outdated because the link he provided to files like jquery.glob.fr.js is invalid. But you get redirected to the improved version by Jquery.
That's ok, but They just don't do what they promise to do. I tried searching for tutorials and information about this, but the only help on the internet is the ReadMe file. They state this =>
Globalize.culture( "fr" );
console.log( Globalize.culture().name ) // "fr"
Globalize.culture( "fr-FR" );
console.log( Globalize.culture().name ) // "fr-FR"
But when I try it my alertbox returns en instead of nl-BE
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.culture.nl-BE.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="../../Scripts/globalize.js" type="text/javascript"></script>
#Html.MetaAcceptLanguage()
<script type="text/javascript">
$(document).ready(function () {
//Ask ASP.NET what culture we prefer, because we stuck it in a meta tag
var data = $("meta[name='accept-language']").attr("content")
//Tell jQuery to figure it out also on the client side.
alert(data.toString());
Globalize.culture("nl-BE");
alert(Globalize.culture().name);
});
</script>
At first I tried Globalize.culture(data), it didn't work so i tried nl-BE like the documentation states. No difference.
How do I get to change the culture to nl-BE instead of en?

Multiple jQuery includes in a document

I have a document which uses old jQuery and I need new jQuery for a particular plug-in.
My document structure looks like this:
<html>
<head>
<script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
<script>
$("#elem").doSomething(); // use old jQuery
</script>
<!-------- My plugin begins -------->
<script type="text/javascript" src="jQuery.new.js"></script>
<script type="text/javascript" src="jQuery.doSomething.js"></script>
<script>
$().ready(function(){
$("#elem").doSomething(); // use new jQuery
});
</script>
<div id="elem"></div>
<!-------- My plugin ends ---------->
<script>
$("#elem").doSomething(); // use old jQuery
</script>
</body>
</html>
I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.
To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.
If you cannot do this, you can run in compatibility mode. Here is how.
<script src="jquery-1.3.2.js"></script>
<script>
var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
var jqueryB = jQuery.noConflict();
</script>
You would need to call
jqueryB("#myelement").....
To use the alternate version.
You should use jQuery.noConflict();
See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/
As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.
Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="elem"></div>
<script>
var oldFunct = function (e,o) { alert("old jquery" + o); };
var newFunct = function (e,o) { alert("new jquery" + o); };
$("#elem").bind("doSomething", oldFunct);
$("#elem").trigger("doSomething", ["1"]);
</script>
<script>
$(document).ready(function(){
$("#elem").bind("doSomething", newFunct);
$("#elem").trigger("doSomething", ["2"]);
$("#elem").bind("doSomething", oldFunct);
});
</script>
<script>
$("#elem").trigger("doSomething", ["3"]);
</script>
</body>
</html>

Categories