Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have built a simple page on my localhost and then I have uploaded it on the net. When the page is viewed from local machine, all jQuery interactions works well without any problem. But when I view the hosted page, nothing happens. It seems a plugin + jQuery are not loaded properly, though I see them loaded (using firefox view source code, I check the scripts address and see their source without 404 error).
I appreciate any help. Here is the address:
http://tarjom.ir/demo/niazer/
The jQuery interaction is that when the user clicks on the search bar, a box slides down which contains many search-categories.
And also the thumbnails at the bottom of the red line moves when mouse hovers it. Now, you probably wouldn't see any of these stories.
The page is written using codeigniter.
EDIT EDIT
the scripts and CSS are loaded automatically using a library written for codeigniter. But the generated HTML markup for browser is as follows:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/mtSlideElement.js"></script>
prettyCheckable is a jQuery plugin, you need to include it after you call jquery, change the order you are including the scripts so it looks like this:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
2-prettyCheckable.js has a semicolon as its first character and there is no method called prettyCheckable in it. Did a few lines get cut out of this script by accident?
Your pages has two 'html', 'head' tags, you might want to remove them. And put all those javascript into a single.js file and call include it just before tag.
There is are definition for prettyCheckable();
You have loaded two jQuery, at first jQuery v1.10.2 and then prettyCheckable.js and then again jQuery v1.10.1, this is the problem because, once prettyCheckable extended the core jQuery and then you loaded again another jQuery and it's completely new. This the order
http://tarjom.ir/demo/niazer/js/blue/1-jquery.js // loaded
http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js // jQuery.fn extended
http://code.jquery.com/jquery-1.10.1.min.js // old jQuery replaced
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am new to Wordpress. I am used to make websites from scratch.
I am currently working on a wordpress template (Astra).
I need to make a custom page using HTML,CSS,JS,Php from scratch and add it to my wordpress pages.. How can I do it?
I've google it and saw many approaches but didn't get anyone of it.. Some suggested to make a Parent/Child related pages but I don't know ..
Can I just put a .php file in the directory and make a link between it and wordpress pages?
How can I link css/js pages with them also ?
Simply Create a .php file with all the html css JS and php code. on Top add comment inside your file
<?php
/* Template Name: Custom Page HTML */
and then create a new page and Select new created Template and publish that page.
you can create this file inside your theme folder.
I would suggest creating a normal page in wordpress then in the back end editor you can edit the html raw. I usually use my JavaScript inside my html. As for the css you can edit that by going to the page you created when logged in, then clicking customize. There should be a additional css option where you can edit the styling.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have trouble running some code before page loads in jquery or js. Anything I do the page would have a brief load then my codes run. I run code before user sees the page but it loads in a brief milliseconds then my code runs.
I have done some solutions and didn't do what I want:
I've put my codes before document.ready
I've put my code in head section
I've put my code in a function then called the function in head tag
I also tried onload() in js
But the same result: my code runs after milliseconds and user sees the page before running code in these milliseconds
Any ideas?
Start with body hidden and show it after your code is executed.
<html>
...
<body style='display:none'>
...
<script>
$(document).ready( function() {
...
$(document.body).show();
})
</script>
</body>
</html>
Scripts inside the <head> will run before this occurs, but there won't be access to the elements on the page.
Try this code
<body>
<script type="text/javascript">
alert("After click ok you'll see the page content!!!");
</script>
rest of the page
</body>
You could put your code in 'loading' state of document via document.readyState but in this state DOM is not ready to operate. Here your have example how to use document.readyState https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState#Different_states_of_readiness What actualy do you want to do?
You shouldn't but anycode in <head>
My suggestion is to use loader, so make the body tag invisible using css display:none
so your code will be run as if the page isn't loaded yet.
then you add $(document).ready({$('body').css('display','block')})
Jquery and Javascript are client side languages, and are read by the browser as the page loads.
Usually we would use something like:
$(document).ready(function(){
//do stuff
});
This is to make sure the elements are loaded on screen before the JS functions run to make sure any elements that are needed for the script have been loaded.
What you seem to be doing is running the script at the same time as the page loads so there might be something in the script that prevents the rest of the HTML from loading as this is running and thats why you see the load time.
You should look at PHP. (hypertext pre-processor) This is a server side language rather than client side. So it pre-processes what you want server side and then sends that to the users client/browser.
Check out http://www.developphp.com/
This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 5 years ago.
I have 4 javascripts within <script> tags in all multiple of my content pages. They handle popups and disabling of other buttons on button clicks. So at the moment I have a lot of duplicate script code on every page.
Is it possible to have these scripts in the master page instead and have all my content pages reference them? If so, where in the master page do I put them and how do I reference them on a button click?
I have searched google but haven't found any good answers.
Edit 1: To deal with the duplicate marking.
I am mostly looking to avoid duplicate code here, that is why I want to put this in my master page. If it is possible to put my scripts in a JS file, include that on the master page and have all my content pages access the scripts from there. Then that is absolutely a solution to my question and will gladly accept an answer that describes how I do that. To be clear, it is the accessing part that I haven't found how to do.
But just saying something like, "put the scripts in a JS file and include the file on your page", is not a solution to my question since it just hides the duplicity in files instead.
Edit 2: What I have tried now.
As per M Idrees's answer below I have put my scripts into buttonScripts.js, which is located in my projects Scripts folder. I added it to the head of my master page:
<head runat="server">
<script type="text/javascript" src="~/Scripts/buttonScripts.js"></script>
...
</head>
I kept the click functions on my buttons as is:
<button ... onclick="if (!myFunc(this)) { return false; }"></button>
Then I removed the scripts from my content pages and started my web app. Now I get the error "myFunc is undefined". This is what I mean by "it is the accessing part that I haven't found how to do" above.
Edit 3: I suck.
Tried to use a relative path, as you can see above. With a proper path:
<head runat="server">
<script type="text/javascript" src="Scripts/buttonScripts.js"></script>
...
</head>
It works as intended. Thanks!
Within the head tag of your master page. Add your script reference, like:
<script type="text/javascript" src="path/to/script.js"></script>
Remove all other script references from your content pages. It will automatically get from master page.
Regarding your point: it is the accessing part that I haven't found how to do.
You don't have to change anything about accessing script code. It will work as it might be working now.
Do these steps, and if still have any problem, just update in this post.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I wrote my web app prototype in static HTML http://footytracker.com/prototype/app/
It uses a js drop down menu for mobile, which works in the prototype.
I've started to port it to the real app which will be done in PHP and the menu dropdown will not work.
http://footytracker.com/app/
I have a feeling it's due to the PHP includes?
UPDATE: Have reordered the JS files to fix the smoothscroll error and this creates a new error:
Uncaught Error: The nav element you are trying to select doesn't exist.
I can't understand why the PHP version of the site refuses to load the responsive-nav menu.
I'm pretty new to PHP, any help is greatly appreciated.
After viewing you source, I noticed these js files are in the wrong order:
<script src="js/fixed-responsive-nav.js"></script>
<script src="js/scroll.js"></script>
Since fixed-responsive-nav.js requires a class/function from scroll.js, the order needs to be reversed:
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
If you're not already using them, try checking your browser's Development Tools (press f12 in Firefox or Chrome) to see any errors in your console or requests.
EDIT
Check your order (once again). In your HTML Version, your .js files are like so:
<script src="js/scroll.js"></script>
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
<script src="js/scroll.js"></script> <!-- Duplicate Include -->
But in your PHP Version, they are in a different order:
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script> <!-- Should be above all of them. -->
<script src="js/fixed-responsive-nav.js"></script>
Try to fix that and it should work fine for you. This is a layout issue and not a PHP Issue.
Second Edit
In your HTML Version, you only have one .js file called before creating the <header>, responsive-nav.js. The rest of your .js files are called at the bottom of your page, after the <header> has been created. Try doing the same on your PHP Version.
I have bought dating site software called eMeeting. I tried to add a custom javascript slider to the header. The slider needs jquery library to work, but when I include the library, other scripts from the webpage stop working. But if I comment the line below (located in sliders js file)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Other javascripts from the page will work again.
I have done an example of my problem to here.
It would be really nice if someone has some time to help me or give me some suggestions. Also the webpage is http://flirt.ee
Best Regards,
Mairo
Probably a conflict with another library.
Add this right after you include jquery:
<script>$.noConflict();</script>