I am adding a dynamic commenting system from ( here ) ( here the files ) to my site
Well the thing is that I can't make it work.
The script detects the full url of the webpage and saves the comments to a file associated to that url.
But since I have only one file (index.html) I think the system can't make the difference inside the file. I mean the code is like this:
<link rel='stylesheet' type='text/css' href='./jscomms/style_light.css'/>
<script type="text/javascript" src="./jscomms/jquery.js"></script>
<script type="text/javascript" src="./jscomms/jquery.comments.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#comments").comments();
});
</script>
<div id='cont' style='width:450px; margin:45px;'>
<div id='comments'>
<noscript>Need Java to comment</noscript>
</div>
</div>
So, if I am able to make some variable identifier in this code maybe it will work, I don't know really.
I was trying to change this line
......
$("#comments_identifier").comments();
.......
<div id='comments_identifier'>
.....
And the script shows, but I am unable to "click" the publish button.
Related
I setup bootstrap files in public folder. Routes are as below:
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
no problem with this. I can see connection to files when I check the source code. and also bootstrap fonts are active but, when I try to copy some examples from bootstrap website. It doesn't display properly. For example I copied navigation bar to my main.blade But it doesn't show up.
What is causing this? Any idea?
It s big screen but showing responsive hamburger icon?
You should add jquery before bootstrap min js file
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
The order in which you add javascript in HTML page is important. In this case since bootstrap.min.js uses jquery.min.js jquery must be added first. So when bootstrap loads and looks for jquery it finds it.
But if one script does not depend on another then you can add them in any order.
So add jquery.min.js first then anything that uses jquery(like bootstrap) after it.
I have been trying to get this tooltip code to initialize on a page and I cannot get the jQuery to connect properly.
We have PHP running on Ubuntu and we are using Silverstripe. I cannot get the following script to work, no matter where or what file I add it to. I have even tried calling it in from a separate file and it also did not initialize.
How would I add this code to a PHP or SS file? (Silverstripe CMS file)
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<button type=\"button\" class=\"btn btn-default help-tool\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Below you will find state-by-state breakdowns in Federal, State, and where available Local categories.
Explore the data by clicking the map or by clicking the magnifying lens in the table view.\"><i class=\"fa fa-info-circle fa-fw\"></i></button>
This is generally an issue involving the order in which your scripts are called.
As I'm sure you know, you need to call JQuery before Bootstrap, which it seems like you are doing. Your tooltip code, which is in a different file, is most likely being called before your JQuery and Bootstrap have a chance to load. You can test this by copying your JQuery and Bootstrap script calls into your separate file right before the tooltip script call.
If your script calls are at the bottom of your body tag, and part of the page is being dynamically loaded, you can try calling JQuery and Bootstrap in your head tag instead after your CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src="bootstrap.css" />
<link rel="stylesheet" type="text/css" src="main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<!--
Your separate file code that
includes tooltip
-->
<!-- Before
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
-->
</body>
</html>
There are two causes that come to mind here. First, it's possible that the $ is getting interpreted by SS's template parser as a variable expression. I would expect you would be getting an error if that is the case. Second, as Sumit Kukreja indicated it's likely that jQuery and Bootstrap are being injected at the bottom of your template and this code is getting executed before those are loaded.
Option 1: To verify if this is happening you could add the following code to Page_Controller::init() or mysite/_config.php:
Requirements::set_write_js_to_body(false);
Which will cause all required javascript to be added in the <head> tag. Not a good idea for production but could help diagnose your problem.
Option 2: You can include that javascript from your controller using Requirements::customScript.
Option 3: Wrap your js snippet in a non-jquery domready listener like so:
document.addEventListener("DOMContentLoaded", function(event) {
$('[data-toggle="tooltip"]').tooltip()
});
I have a laravel project and just wanted to use a simple timer jquery script in it. I created a new folder in views, placed there my code. I also placed there another folder called flip_timer with jquery files.
My problem is that i cannot make the script paths work "not found http exception".
Folder structure looks like this: folder in views > contains file(code below) and folder including all the needed files. Whenever i try to run the link with code the page is empty, and when i click to see the source code and click on the css or js link it shows me the error i mentioned above...
<link rel="stylesheet" type="text/css" href="flip_timer/jquery.flipcountdown.css" />
<script type="text/javascript" src="flip_timer/jquery.min.js"></script>
<script type="text/javascript" src="flip_timer/jquery.flipcountdown.js"></script>
<div id="retroclockbox1">
<script>
jQuery(function($){
$('#retroclockbox1').flipcountdown();
})
</script>
</div>
put your jquery.flipcountdown.css file in inside css folder named: css/flip_timer/jquery.flipcountdown.css
AND
your both js file inside js folder named:js/flip_timer/jquery.min.js and js/flip_timer/jquery.flipcountdown.js and then put below code in your html file.
<link rel="stylesheet" href="{{ URL::asset('css/flip_timer/jquery.flipcountdown.css') }}" />
AND for js file
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.flipcountdown.js') }}"></script>
I'm a bit of a newbie with sources etc and I took it for granted that I could simply add the script src to the header and then add as many scripts or functions as I wanted after that. For the most part this is working fine but now I hav an issue that I cannot solve.
I can either have one script running or the other, both will not work in harmony no matter how many different permutations I've tried. I'm sure there's an easy fix or something I'm missing entirely. I had a look online for an idiot's guide but didn't find anything of use.
The two function scripts are in different places. One is in the head and called from the body of the HTML pages, the other is in an include which is added to every page for dynamic links.
This loads everything Except what is within the body
<!--Creation and hiding of div to allow images load-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
Whilst this loads the body script but none of the others.:
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
I then tried putting the script src in the include, including the src twice and lots of other stupid senseless ideas.
If anyone could help it'd be great! Many thanks
Your include jQuery like three times in this code. i'm not sure if thats the problem but it ain't the solution
// jquery from jquery.com
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery (required) --> // jQuery from google
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
// both of these are expendable
this might cause a conflict since the last one to be included is an older version of the library. you only need only inclusion. I'm assuming your using migrate because you have older jQuery code running in your scripts.
CODE ERROR
<script>
$(function(){ // syntax error
prettyPrint script here;
</script>
<script>
$(function(){ // same error
slider script here
</script>
you have syntax errors here, and any script that comes after this code will not run or work.
I had a function in one f the scripts that was returning an error. That seemed to be halting the est of the code. -.-
Also only have one instance of jquery in the head now.
I have just purchased "Tonic Gallery" which my client thinks it's absolutely perfect for his website. The difficulty is that it works great with HTML but for ".php" it won't even load.
To give you a better idea, here two links:
Tonic Gallery Link: http://codecanyon.net/item/tonic-gal...gallery/120710
LincHospitality.com: http://linchospitality.com/
This is inputed into the "Portfolio" tab. As per instructions, I have entered the following into the "head" (header.php):
<link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
<link rel="stylesheet" type="text/css" href="styles/demo_styles.css"/>
<link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"/>
<script type="text/javascript" src="script/jquery-1.4.js"></script>
<script type="text/javascript" src="script/jquery-easing.js"></script>
<script type="text/javascript" src="script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="script/portfolio-setter.js"></script>
<script type="text/javascript">
$(function(){
// init the portfolio functionality
$('#portfolio_wavy').portfolioSetter({xmlSource:'portfolio.xml', wavyAnimation:true});
});
</script>
I had then created the "portfolio.php" page with the required input from the plugin:
<?php $page = "portfolio";?>
<?php include("header.php"); ?>
<div role="main">
<div class="wrapper" id="subPagesWrap">
<div id="portfolio_wavy"></div>
</div><!-- wrapper -->
</div> <!-- end main -->
<?php include("footer.php"); ?>
The in a direct ".html" file, it works perfectly! But since I had placed in the "header.php" and "portfolio.php", I get the following error:
$("#portfolio_wavy").portfolioSetter is not a function
Here is a link to the ".html" files as to how it's suppose to work. Same functions, same root folder just not working in ".php".
linchospitality "/" gallery [dot] html
How do I over come this function error? Any simple methods?
Thanks!
You need to run the function after it has loaded. You can make sure of this by running it on the document ready event. I am not sure of the syntax you are using, but just make sure that it is run after the document ready is fired.