I'm now stuck with this problem below, and I hope you can help me out. I would really appreciate it.
1st -- I created the Wordpress Menu (got it all worked).
2nd -- I implemented the Bootstrap classes (e.g nav navbar-nav, dropdown, dropdown-menu etc..) on the html tags of the Wordpress Menu. (got it and made it work somehow)
3rd -- To make the dropdowns work I used (preg_place) to replace the default (submenu) to (dropdown-menu) then to make the function work I used the (preg-replace) again to INSERT a class and data-toggle to the Anchor Links.
Now the problem is, the anchor links doesn't seem to function right at all.
check it out here.
(use the navs on top)
HEres the code on the function.php
function new_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="dropdown-menu" /',$menu);
return $menu;
}
add_filter('wp_nav_menu','new_submenu_class');
function add_menuclass($ulclass) {
$ulclass = preg_replace('/<a/', '<a class="dropdown-toggle" data-toggle="dropdown" role="button"', $ulclass);
return $ulclass;
}
add_filter('wp_nav_menu','add_menuclass');
Thanks much guys!
And btw.. i used a jQuery for the 3rd level submenu. which is:
<script type="text/javascript">
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if(!$parent.parent().hasClass('nav')) {
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
$('.nav li.open').not($(this).parents("li")).removeClass("open");
return false;
});
});
</script>
In the function, I would try to change this line:
$('.navbar a.dropdown-toggle').on('click', function(e) {
For this one:
$('.navbar').on('click', 'a.dropdown-toggle', function(e) {
Since a.dropdown-toggle has been happended...
Maybe it was not present on "document ready", so the "delagation" syntax could help.
Related
I am creating menu, and if the specific page is current , menu item assign different color.
Simple situation.
So i do :
<?php $page = $_SERVER['SCRIPT_NAME'];?>
<?php if ($page == "index.php"){ echo "class='active'";} ?> >
Home
That works for every page, except one.
I tried some other options suggested on stackoverflow
How to get current PHP page name , like :
echo basename($_SERVER['PHP_SELF']); returns file_name.php
and
if(basename(__FILE__) == 'file_name.php') {
//Hide
} else {
//show
}
Still does not work.
$pagename = basename($_SERVER['PHP_SELF']);
if($pagename=='index.php'){
echo "class='active'";
}
According to the data you supplied I suggest to use client-side solution instead of server-side solution. I mean that you use javascript.
This is may be done as follows:
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Any Other</li>
</ul>
<script>
function setCurrentNavLink(id){
nav = document.getElementById(id);
links = nav.getElementsByTagName('a');
for (i = 0; i < links.length; i++){
if (links[i].href == location.href){
links[i].className = 'current';
break;
}
}
}
setCurrentNavLink('menu');
</script>
Check this demo: http://jsbin.com/tomid/1
Sorted. The problem was in JQuery , thats operates Tabs on the current page.
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$("ul.tabs li a.active ").removeClass("active");
//$(".active ").removeClass("active");
// switch this tab on
$(this).addClass("active");
//$(".collapse navbar-collapse").addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
The mistake was in 3rd section, where Class .active was removed from Every object. Including header. Therefore header did not appear as active.
Instead of that, class .active had to be removed only from Tabs tab.
I've created a php template with variables library and what not all pulled into an index page I've created a basic script with fades the page in and out on load and have got that working the next thing I wanted to do is to use my navbar links to pull formatted content into the page (as I'm using foundation 4 framework) now the code I tried is as follows
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
the idea is that onclick it removes the content with the wrapper displays a loading gif and then loads the page content which is stored in the link referred to in the
but its not working is just reloading the whole page . . . . i have tried reading up and it says that you can use
You can extract from another page using the load method thus >$('#targetElement').load('page.htm #container') syntax.
and using the get function but im not to good at all this jquery is there a way I can do it in php or where am I going wrong with what I've done.
Try this....You were calling the load, and functions inside improperly...
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
//window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,showNewContent);
}
function showNewContent() {
$('#content').show('normal',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
When a user clicks a link the browser by default unloads the current page and loads the page indicated by that link.
You need to prevent the default behavior of the browser, in order to do this you need to call the .preventDefault() method on the click event that was triggered for that link.
$('#your-context').click(function(event) {
event.preventDefault();
/**
* the rest of your code here
*/
});
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I am making a website in HTML, CSS and PHP. I have a navigation on the top of the page, and when you hover your mouse over the buttons, they light up.
Now, when you click a button and go to that particular page, I would like the button for that page to be lit up, indicating that you are on that page. How would I go about doing this? Defining a variable on each page and then checking for it in the menu is not possible, as I have a forum on the site too, and that would require me to define a variable on each page.
EDIT
I managed to solve my problem. As it turns out, I could just define the pages, and for the forum I could do the same in the settings file that the forum used.
In my navigation, I just check what the current page is:
<li id="news"><a <? if(PAGE == "INDEX") print 'class="active"'; ?> href="/">News</a></li>
Add a class (or ID) to the body tag, like so:
<body class="Page1">...</body>
Then, in your CSS you can say something like:
.Page1 menu li, menu li:hover {...}
I'm not sure how to check for the current page in PHP - though, that would be ideal.
If you want to rely on JavaScript, though, I have used this function in the past successfully:
function highlightPage(id){
//make sure DOM methods are understood
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
var nav = document.getElementById(id);
var links = nav.getElementsByTagName('a');
for (var i=0; i < links.length; i++){
var linkurl = links[i].getAttribute('href');
var currenturl = window.location.href;
//indexOf will return -1 on non-matches, so we're checking for a positive match
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
And to load the function at the load of the page:
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(function(){
highlightPage('navigation');
});
This assumes that your navigation has the ID of "navigation", but you can change it to whatever you want. The function simply attaches a class of "here" to the current navigation item.
This script comes from Jeremy Keith's "DOM Scripting".
Im creating a wordpress site with WP-Ecommerce. My client asked for a functionality that i cant figure out how to make. He has a product with a long description and he wants multiple "read on" links to hide parts of it. It should be done in javascript so that client wont be redirected anywhere when he clicks on read more (extended content should just scroll open.)
it would be nice to find a plugin but i cant seem to find one.
A plugin for this would be easy to write. You just need to write a shortcode that adds the javascript to do what you want. The jQuery accordion for instance.
<?php
function add_accordion_js() {
?>
<script>
$(function() {
$( ".accordion" ).accordion();
});
</script>
<?php
}
function jquery_accordion($atts, $content = null) {
return '<div class="accordion">' . do_shortcode($content) . '</div>';
}
add_action('wp_head', 'add_accordion_js');
add_shortcode('accordion', 'jquery_accordion');
?>
Something like that can be added to your functions.php and you would wrap everything you need to collapse in [accordion][/accordion] tags... and it will break the sections down at the tags...
somhow i couldn't get accordion() function to work but Steve pointed me in right direction and i got this going:
function add_accordion_js() {
?>
<script>
jQuery(function() {
jQuery(".accordion").hide();
jQuery(".opener").click(function (e) {
jQuery(this).parent().next('.accordion').slideDown('fast');
jQuery(this).slideUp();
});
});
</script>
<?php
}
function jquery_accordion($atts, $content = null) {
return '<span class="opener">(read more)</span><div class="accordion">' . do_shortcode($content) . '</div>';
}
add_action('wp_head', 'add_accordion_js');
add_shortcode('accordion', 'jquery_accordion');
and things i needed to hide under read more link i wrapped in [accordion][/accordion]tags