i am calling a Header.php in main.php using
<head> </head>
<body>
<?php
include 'common/header.php';
?>
</body>
In the Head i am calling all the CSS and JS.
The CSS are being called in header.php properly.
In Header.php i have 2 tags. I would like to implement tooltip on one of them.
<li><a class="english" data-toggle="tooltip" title="Hooray!" href="">English</a></li>
also i added the JS for tooltip
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I tried to add this above code in header.php , bottom of index.php and also in head of index.php.
If i try to create a tooltip in the main.php file , it works absolutely fine.
there are no errors in console. I dont know what is the error.
Help ! TIA.
Try adding the code (script tag) at the bottom of header.php file, after all the html elements.
Related
my problem is quite annoying and weird. I have created a custom Wordpress theme and in the header.php I was loading jquery like this (can't remember why right now):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1"); </script>
Last night I replaced the code above with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and then my site collapsed. I changed it immediately back again, but the problem persisted. I placed some Jquery in the HTML and it works just fine. Then I disabled my plugins by commenting out code in my functions.php file as below:
<?php
if (!is_admin()) {
wp_register_script('custom', get_stylesheet_directory_uri().'/js/custom.js');
wp_enqueue_script('custom');
wp_register_script('blockui',get_stylesheet_directory_uri().'/js/jquery.blockUI.js');
wp_enqueue_script('blockui');
wp_register_script('fancy',get_stylesheet_directory_uri().'/js/jquery.fancybox.js');
wp_enqueue_script('fancy');
wp_register_script('jeasing',get_stylesheet_directory_uri().'/js/jquery.easing.js');
wp_enqueue_script('jeasing');
wp_register_script('friendchooser',get_stylesheet_directory_uri().'/js/jquery.friendChooser.js');
wp_enqueue_script('friendchooser');
wp_register_script('zclip', get_stylesheet_directory_uri().'/js/jquery.zclip.min.js');
wp_enqueue_script('zclip');
}
?>
Still the problem occurs. Any ideas?
There is syntax error in custom.js file in line 30. Just remove } from there.
And learn some about firebug, it's very helpful :)
I need to create an HTML header and footer file from my WordPress php. I need to provide these files for a third-party that builds the page for me. the basic layout is:
header.html
their content
footer.html
how can i dynamically create the header.html and footer.html?
If you don't think you are going to change your theme any time soon, just save the source of one of the pages and then cut and paste.
Alternatively you could browse to whatever include file your template stores the header in and then do a view source save as header.html and likewise for the footer.
user JQuery to load the inc file into the body of the html page
<html>
<script src="path/to/jquery">...
...
<body>
loading include
</body>
<script>
$(document).ready(function($) {
$('body').load('path/to/include.php', function() {
/// do nothing
});
});
</script>
</html>
or even better still, I assume they will give you a page that has your header, their crap, your footer. If thats true
header...
<html>
...
<body>
<div id="their-crap">
footer...
</div>
</body>
</html>
and then where ever you want to put that data, do
<script>
$(document).ready(function($) {
$('selector-you-want').load('path/to/renderedpage#their-crap', function() {
/// do nothing
});
});
</script>
I have to include this
http://rajendar-codinghints.blogspot.in/2012/06/add-dropdown-country-state-list-to-html.html
into my smarty's template file i.e header.tpl
Required js file is present with correct path.
Whole thing is working fine in simple html file but not in smarty
please help.
Wrap your Javascript code into {literal} tags
{literal}
<script type="text/javascript">
<!--
Your javascript code
// -->
</script>
{/literal}
See docs for more details
Is there a way to inject/append CSS pasted into a textarea into the head section of the page? I'm making the settings page for an app, and I want to allow themes and the option to change minor things by just adding CSS into a textarea then clicking save.
Other option: Is it posiible to have the textarea display a file called "theme.css" then any changes made will be saved as that file. And to completely change the theme, just copy/paste a new one directly into the text box.
If you use jquery this is how you can do
<script>
$("head").append("<style>body {background:blue;}</style>");
</script>
As another option
you can read theme.css file using fread , show it in textarea and save it to file using fwrite.
Something like that?
<!doctype html>
<html>
<head>
<script type='text/javascript'>
function addStyle(css){
var stl = document.createElement('style');
stl.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(stl);
}
</script>
</head>
<body>
<p>Paragraph To Test<p>
<textarea id="txtarea">p{color:red;}</textarea>
<input type="button" value="Set Style" onclick="addStyle(txtarea.value);">
</body>
</html>
Is it "okay" to have an HTML document embedded inside the body tag of another HTML document?
The reason why I want to do this is so that I can call a javascript body onload -- I cannot do that in the main HTML document because the main HTML code is dynamically generated by a controller (Yii) that controls other pages and I do not want to edit it.
*By the way, I tried it and it seems to work fine now, but I just want to be sure that the page will not break in the future for whatever reason.
<html>
<head>
<body>
<html>
<head>
<script type="text/javascript>
function somefunction(){
}
</script>
</head>
<body onload="javascript:somefunction()">
</body>
</html>
</body>
</html>
If all you want to do is attach an onload event, you're going about it the wrong way.
All you have to do is add a script element that attaches an onload event:
<script type="text/javascript">
function somefunction()
{
...do stuff...
}
document.body.onload = somefunction;
</script>
Alternatively, if you've appended your JS files at the bottom of the page, they will be able to interact with the DOM similarly to how onload works. The reason to use onload is only so that the elements defined within the web page have been added to the DOM by the time a function is executed. If your scripts are after your content, the elements will be in the DOM.
No, that's bad HTML.
Just put your JavaScript at the bottom before </body>.