I have searched but could not find answer to my satisfaction so
I have a header file, which is being included on top of every page and part of the header is a menu with 3 tabs, when user click on tab browser take them to that page (working fine), what i want is, that what ever tab user clicks to be highlighted(diff back color) when that page is loaded.
Here is html :
<div id="top-choicebar">
<ul id="topmenu">
<li><a href="daily.php" class="ww" >Daily</a></li>
<li>< href="weekly.php" class="ww">Weekly</a></li>
<li>< href="monthly.php" class="ww">Monthly</a></li>
</ul>
<div id="event-menu">
New to php and jquery ... any help will be greatly appriciated
You can do that by means of CSS and conditional classes.
Weekly
Monthly
you can try using something like this, but it's very rudimentary:
<?php if (preg_match("/weekly.php/i", $_SERVER["SCRIPT_NAME"])) {
// Tab should be highlighted
< href="weekly.php" class="ww active">Weekly</a>
} else {
< href="weekly.php" class="ww">Weekly</a>
}
?>
this will add an 'active' class to the link, that you can then style with CSS to change the background colour...
What I've always done in the past is pass a parameter to the class that is building the menu based on what page I'm loading.
So daily.php loads up Header.php and passes it a variable like new Header(0) when Header builds the html, it loops through the links to print them, and on the number that's been passed, it adds a class like current.
So if:
Daily == 0
Weekly == 1
Monthly == 2
The header would pick the correct one to apply the class to based on the page that calls it.
Of course, this would only work if your menu links are being stored somewhere besides raw HTML, like in a database or even just an array.
Have a class setup like .selected{background-color:red} That defines the different background color you want to view. Then when you render the page, since you already know which tab it is, you just render the selected tab with that class attached. If you are rendering the tab content through ajax you can just find all tabs with class "selected" and then add the class to the selected tab
$("#topmenu li").live("click", function()
{
$("#topmenu").find(".selected").removeClass("selected");
$(this).addClass("selected");
});
Related
I'd like to be able to show or hide content in a sidebar based on the height of the adjoining content div, but i'm not exactly sure if/how it can be done.
For example, on the blog page of my current project (http://djryanmcnally.pixelworx.it/?page_id=18) I have two widgets in the sidebar (one for latest tweets, and one for latest music news) however, as you can see on this page, the content of the blog posts (all test posts...) are much longer than the height of the two widgets, and would of course, get larger as more posts are added. This leaves a certain amount of blank space below the last widget in the sidebar, which I would like to fill based on the height of the adjoining #content div.
Suppose, for example, I also wanted to put into the sidebar some other content divs, such as #latest-pics, #latest-mixes and #latest-events but only if the adjoining content was large enough to create space for them, how would I do that?
I thought about using inline styling with variables, such as: (Pseudocode)
$i = #content(height);
if $i > 500px { $display1 = 'inline' }
else { $display1 = 'none' }
elseif $i > 1000px { $display2 = 'inline' }
else { $display2 = 'none' }
elseif $i > 1500px { $display3 = 'inline' }
else { $display3 = 'none' }
.......
endif;
and using <div id="latest-pics" style="display:<?php $display1 ?>;"> etc...
But, I highly doubt that would be anywhere even close to doing what i want, but, y'know, thought process, etc! lol!
I could of course use a floating sidebar that moves down as the use scrolls, but it'd be a nice touch to be able to do this somehow!
Any thoughts?
p.s - excuse the sketchy code example, i'm typing in a rush as I have to go to work!
Thanks in advance! :D
This was mind bugling for me too ;) That's why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.
This way you can add as much widgets as you want, and they will be removed if content is not high enough.
It works by default with Twenty Thirteen theme but you can use plugin settings to adopt it to any theme. It's called sidebarAutomizer and can be found at wp repository - http://wordpress.org/plugins/sidebarautomizer/
Definitely looks like a javascript kinda thing. You want a vertically responsive layout, which is close to impossible to do with pure php. The webserver loads the php code first then runs the javascript; meaning you can't reference javascript variables with your php.
Looks like your theme already has jquery installed so you might as well work with that.
In my opinion, I'd have all the divs on the side bar there but make sure they are all hidden (style="display:none"). Once the page has loaded and the content div is on the document, you can grab the height of the main content div on the left with
var h = $('#main').height();
Now the tricky part is knowing how the content in each of your sidebar widgets is going to be populated. You might want to put some limits on that to make things easier, or else you're going to require alot more post processing.
Once you know how you are going to handle the heights of you individual widgets, and what tier schema you want them to show in, you can show them as simply as
$('#widgetId').show();
Where '#widgetId' is going to be the id="" attribute on your div that you originally set to display: none.
So it would end up being something like
if(h > 100) $('#widget1').show();
if(h > 300) $('#widget2').show();
...
ect
If some of the widgets are too tall (say the widget2 is 500px usually) then you can set the height of the widget with javascript and handle the overflow however you'd like. You can use a overflow-y:scroll but that'd look pretty ugly, maybe just overflow:hidden, and make sure the height is at a consistently asthetic place for the widget.
I was going to do some commenting for suggestion; however, after some thoughts, I decided to go for answer area.
I think it is totally achievable. (Pseudocode)
set up sidebar area with fixed sidebar items with divs and define empty sidebar divs for other hidden content.
(empty divs for hidden content: ...)
Loop start: get total scrolled_height by jQuery ($(window).scrollTop() + $(window).height()).
get used_space_height including header and sidebar height
calculate the available_height by (scrolled_height - used_space_height)
see if next sidebar div height can fit into avaiable_height or not:
4.1. if yes, load next sidebar div => go to step 5.
4.2. if not. => go to step 6. end
load next sidebar div with ajax call to return content => go back to step 1.
Loop End.
Execute the above steps in javascript/jQuery by detecting that user stops scrolling.
Hope this helps.
I have this problem:
I want make one navigation menu with tabs, where when I click the element stays selected. But at the same time, I want to have one page called index.php per example, with the HEADER (Menu, logo, etc.), FOOTER and in the body a ID DIV that load the content from other pages (images.php, articles.php, about.php, etc.)
Well I had tried make it with jQuery and it works but the content show many errors because, these contents depends on a database (MySQL) and all the functions with its variables is in the index.php.
The menu:
<li><?php echo $ent;?></li>
<li><?php echo $lis;?></li>
The jQuery:
$(document).ready(function(){
var elemento = $('#menu ul > li');
var atributo = $(this).attr('class');
$(elemento).click(function(){
//$('#cuerpo').load('1.php');
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//alert("Ha salido bien");
});
});
The PHP code:
<div id="cuerpo">
<?php
switch($_GET['pag']){
case 1:
echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
include '1.php';
break;
case 2:
echo "<h1>Estamos en la página ".$_GET['pag']."</h1>";
include '2.php';
break;
default:
include '1.php';
break;
}
?>
</div>
Anyway the CSS class "selected" its losing when i make click.
Any idea? Thanks a lot!
From what I think you are asking you want to have a single page that has a content div that loads different content based on how which menu item you select. One, prepackaged way to do this is to use jquery ui tabs which you can find here.
A way to do it yourself will result in a similar page but will be with your own code.
I will outline for it here and if you would like further details you can let me know.
First, you will make some kind of menu item that involves some kind of element. An example of this would be to use a list.
<ul>
<li id="one">Link 1</li>
<li id="two">Link 2</li>
<li id="three">Link 3</li>
</ul>
Next you will use jquery to bind click events to the list items. Here is an example.
$('#li_id').click(function (e) {
$('#contentDiv').empty(); //empty div in case content from other tabs exists
//load your ajax content here
$.ajax();
//remove selected class from other li that might have it.
$('li.selected').removeClass('selected')
$(this).attr("class", "selected"); //set li class to show selected styling
}
After this all you have to do is add a css entry for your selected class so that it is styled how you want.
If you have any further questions or need more elaboration please let me know.
Clicking an element and having it stay 'selected' can be done with CSS styling, using a 'selected' class.
First remove the 'selected' class from all elements, to remove styling from any element that was previously selected:
$('nav').children('.selected').attr('className','');
and then 'select' the item that was just clicked
$(this).attr('className','selected');
Okay this has all sorts of different facets to consider/approach.
If you want to continue doing this through jQuery you need to use AJAX posts to call php pages that load your data from the database then send it back to your jQuery code through a JSON request (it does this for you) then you just make the results display where you want. You can find out how to do this easily by searching for AJAX Post on this site or even in google. There are lots of very easy tutorials for this method.
If you are loading your navigation from a database then making it selected won't be very hard. If you are not then you will need to use javascript/jQuery to add the css in afterwards.
Using just PHP and html:
What I normally do to achieve a similar result to what I think you're asking about is to append variables to the URL and then use $_GET[variable_name] to use these variable to search for the data that I need to load from the database, like an article's ID or a date range.
For a very crude example:
<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
when a user clicks on that link it reloads the page then in your php file you use:
$articleID = $_GET[articleID];
$navLlink = $_GET[navlinkclicked];
$query = "_write your query code to pull up the article with that $articleID_";
Then just echo out your results in your main content area of the page, instead of loading the original content that was there first.
Assuming you are pulling your navigation links from your database, when you are getting the nav links, check if the nav link has the same name as $navLlink taken from the top then add a class to that link while it's being echoed out during the while loop, using an if statement:
if($thisnavitem == $navLlink){
echo "<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode' class='selectedNave'>"
} else {
<a href='/index.php?articleID=145&nav=navlinkclicked&category=phpcode'>
}
I hope this helps. This can be elaborated on so much more but this should be a good start
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I developed a PHP website which contains php pages. These web pages have header and footer divisions. I put both the Header and Footer divisions in separate php files and I included them using the php include function.
The problem is that I have links to the main menu in the header and the footer php files.
Before using the include function, I used the CSS Class property of the link tag to display the currently selected link in a different format.
<a id="Link_Home" class="current">Home</a>
<a id="Link_AboutUs" >About Us</a>
<a id="Link_Branches" >Branches</a>
<a id="Link_Services" >Services</a>
<a id="Link_ContactUs" >Contact Us</a>
How can I do the same after using the include function?
Should I use JavaScript to pass the id or name of the link to be the current one with that specific format and style? If so, how do I do that?
Is there a way to use PHP directly to change the CSS properties of the HTML elements so that I can modify the class property during run time? How can I do that?
I appreciate your help and thanks in advance.
If in php You can write class="current" inside a condition like.
<a id="Link_Home" <?php if($page == 'home'){echo 'class="current"';} ?> >Home</a>
You could use ajax to load your page.
I'm saying divide your page into 3 parts. #header, #content and #footer. You may add this using jQuery library:
//adding code to all a tags to manually deal links
$("#footer a").click( function(e){
// check if this has class "current"
if($(this).hasClass("current")){
}else{
//remove all class "current" and add one
$('#footer a').removeClass("current");
//add class "current" to the selected one
$(this).addClass("current");
//get location of the target link
var url = $(this).attr("href");
//prevent broswer default behavior, e.g. opening the link in a new window
e.preventDefault();
//load html from the given address to #content
loadPage(url);
}
});
function loadPage(url) {
//adding a loading icon
$('#content').html('<div id="progress"><img src="images/ajax-loader.gif" /></div>');
//when completed, remove the icon
$('#content').load(url, function(){
$('#progress').remove();
});
}
This is just one solution. It helps you update the content of page without refreshing, so all your javascript data remain unchanged. Ajax makes your site faster.
I'm building a dynamic navigation bar which is controlled by PHP, and I'm using images within my list. And I'm applying jQuery for the 'hover' effects. This is the PHP code:
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
And in my navigation list I'm setting 'display:none' and 'display:inline' depending on the return value of $page using a PHP 'if' statement. See code:
<ul id="cssdropdown">
<li class="headlink">
<a class="lightNav" href="index.php" <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
<a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
</li>....
This is all working fine, the display of the Nav bar images change depending on what page the user is at. But my problem is now I'm trying to integrate jQuery to get a nice 'mouseover / hover' effect. See jQuery code:
$("li.headlink").hover(function(){
$(this).find("a.lightNav").css("display", "none");
$(this).find("a.darkNav").css("display", "inline");
},function(){
$(this).find("a.lightNav").css("display", "inline");
$(this).find("a.darkNav").css("display", "none");
});
But this is causing problems. When the user moves the cursor over the image in the Nav bar for the current page (ie the 'dark' image), it removes the display attribute set by PHP (obviously).
So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none' and tailor my jQuery from there, but for the life of me I cannot figure out how to do, I'm not the worlds greatest javascript/jQuery coder. Is there a way to check if an element has a particular CSS property applied to it, I googled and fiddled with my code for hours, but to no avail.
Thanks in advance everyone.
P.S. I added the CSS !important in my nav bar within the PHP if statement, but this for some strange reason, is only working in Chrome, all other browsers are ignoring this rule.
with jQuery you can check an attribute value like this:
... your code...
alert($(this).find("a.lightNav").css("display"))
As far as using jQuery to hide/show elements, simply use:
$(this).find("a.lightNav").hide()
$(this).find("a.darkNav").show()
No need to fiddle with "display", it's already built-into hide()/show(). You should not need use this either:
style='display:inline !important'"
By default the display is already block or inline, so unless you're using "display:none" you can usually lave these out.
If you have a left-floating menu you should be using float:left, not display:inline
Also inline styles override stylesheet CSS, so you should never need to use !important.
One hint at styling menus, style the A-tag, not the LI. Put the events on the A tags, not the LIs.
If you want to learn how to style menus properly, see my tutorial:
I love lists.
"So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none'.."
This is untested but you could try something like...
if ($(this).attr('style') == "display:none") {
// do something
}
else if ($(this).attr('style') == "display:inline") {
// do something
}
However, you may want to try addClass() and removeClass() instead of changing and/or using inline CSS.
yep..i'd second that using addClass()l and removeClass() would be loads better...some code like
if($(this).hasClass('visible') {
// do something
}
else {
// do something else
}
seems far better and professional and readable...but just me saying...