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.
Related
I am using the slim framework to create a website and have views and twig in my project. In my pages, I use php to help facilitate what html is rendered in my webpage. An example is below
<html>
<head>
<title>I ain't afraid of no bugs!</title>
<link rel="shortcut icon" type="image/x-icon" href="../_images/_logos/bug-hunter-icon.ico" />
<link rel="stylesheet" type="text/css" href="../_css/home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="_javascript/login.js"></script>
<script type="text/javascript" src="_javascript/sign_up.js"></script>
</head>
<body>
<?php require 'header_login.php' ?> //problem
<!--div banner, content-area, footer -->
</body>
</html>
and then I render this page by
$app->render('home.php');
However, the html in header_login.php is not loaded onto the page. Instead when I inspect the element, the page looks like
What I do not understand is why the code I am linking to is not being displayed there. The code being imported is a simple navigation bar. But even if I put echo "lala" on the pages, nothing php is displayed.
Read Twig documentation:
http://twig.sensiolabs.org/doc/tags/include.html
{% include 'header_login.php' %}
Or see SlimPHP - PHP view
https://github.com/slimphp/PHP-View
You can see the difference with the Twig View
https://github.com/slimphp/Twig-View
If the header_login.php file is in the same directory as home.php, you should be able to change it to
<?php require __DIR__ . '/header_login.php' ?>
This tells PHP to load it from the same directory as the current file, rather than the directory of the script being executed.
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.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Codey Buzz's</title>
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
<!-- mobile -->
<link href="../stylesheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/script.js"></script>
<script src="javascripts/SpryMenuBar.js" type="text/javascript"></script>
<script src="js/clearbox.js"></script>
<link href="stylesheets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
<script type="text/xml">
<oa:widgets>
<oa:widget wid="2648024" binding="#OAWidget" />
</oa:widgets>
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<header>
<h1>Inspiring Message</h1>
</header>
<div id="content">
the above html is my header.php file which i include on every page of my website.
I include this with
<?php include("includes/header.php"); ?>
at the top of every page.
In dreamweaver CS6 I get an error that my head tag is in a locked region. I did some research and came across stuff involving a template, though I didn't use a template, I hand wrote my code minus the widgets I'm trying to add. How do I unlock this? I've tried commenting out my head secion in my header.php file and adding a new head section on my index.php page but it still gives me the same error. I don't want to insert the widget into a new page. I want to "unlock the head tag". I added the templatebegineditable in hopes of fixing it though it doesn't work in any variation Ive tried. around the title, before the end of the head tag etc. The support on Adobe for fixing this problem is beyond idiotic, everyone ends up manually inserting the content and changing every link and script directory.
anyone know the fix for this?
By default, your template should have an editable region in it just before the closing tag. It looks like this:
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
Dreamweaver should be able to find that editable region and insert the tag there automatically.
Its Mentioned in Adobe Forums!
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.
Can anyone please help me how to implement vertical jCarousel by using ajax.
Answer to this question can be easily found on the first pages of jCarousel docs, but okay, I'll copy it here for you ;)
First of all download jCarousel and add all the sources to your <head> tag.
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
Then in the place where you want your carousel put this code.
<ul id="mycarousel" class="jcarousel-skin-name">
<!-- The content goes in here -->
</ul>
Then add js code to initialize your carousel.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Carousel gonna be vertical
vertical : true,
// AJAX callback
itemLoadCallback: itemLoadCallbackFunction
});
});
</script>
Then you need to create itemLoadCallBackFunction to actually load new items into carousel dynamically. Basicly once you get some item with index i you just insert it to carousel with carousel.add(i, item).
UPD:
Here is an example with PHP script inside, you can get some inspiration from there.