My Page name is index.php and its contain some links(internal page link) and contents. on the click of link I m applying "selected" class on link li and showing related contents and my page link change from index.php to index.php#c2 (or #c3, #c4, c1 for other ids).
My problem is on the page load. If I give this link in other page eg. in page.php I given like this <li>link2</li> then how could I know that #c2 is passed in URL based on this I want to apply the "selected" class to li. I tried it by $_SERVER but not done. I am not able to get the string after "?".
Pls tell me if there is any other way to do this..
<li class="selected">link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<div id="c1"><!-- contents of link1 --></div>
<div id="c2"><!-- contents of link2 --></div>
<div id="c3"><!-- contents of link3 --></div>
<div id="c4"><!-- contents of link4 --></div>
Jquery code to add selected class
$('.links a').click(function(){
$('.links a').parent().removeClass('selected');
$(this).parent().addClass('selected');
});
Thanks in advance..
You can't do this in PHP, only because it's a client mechanic and PHP is on the server :)
You have to parse your query string directly in JS.
Try something like this :
$('a [href='+document.location.hash+']').parent().addClass('selected');
I think this would work...
e.g for
example.com/page.html#anchor
example.com/page.html#anotheranchor
sol'n is...
if(window.location.hash) {
// Fragment exists
} else {
// Fragment doesn't exist
}
you can use regexp in either server script or javaScript, than defining clss for each of the element.
simply use regexp pattern given below and it will give you only link part from the URL.
^.*index.php/?(.*)$
To see how to use RegExp Object in JavaScript follow the link.
Related
In my PHP application there is a link which generate total summary data. Now I need to add another link which generates current date summary data rather than total summary.
I created the link and got the query to do the same. Now the challenge is to identify which link is clicked in the function. Is there any way I can get the clicked link text from php code? So that I can differentiate between them and call the appropriate branch of code can be executed.
You can use $_GET to differenciate which link was clicked.
in your HTML, make the links like this:
<a href='my_page.php?report_id=1'>Report 1</a>
<a href='my_page.php?report_id=2'>Report 2</a>
In your PHP file (in the example above, it is my_page.php) it should have something like:
<?php
if (isset($_GET['report_id']) {
$report_id = $_GET['report_id'];
if ($report_id =='1') {
// ... generate the first report here
}
else if ($report_id=='2') {
// ... do the other stuff here
}
}
?>
You could have the links direct to different pages one page for total summary one for daily or you could put the info in the URL of the link for instance
<a href="path.php?daily_report=true>Generate daily<\a>
<a href="path.php?total_report=true>Generate total<\a>
Post your code if that doesn't help
I have a administration corner on my web, where can Admin create and post news.
It's implemented with html alements as helper. Admin clics on buttons and elements helps him, to style his text.
It looks this:
I have an option to Edit existing News as well.
Problem is if I try to assign this html text into my variable in ng-init
It all go bad.
<h4 ng-init="TextAreaText = '<?php if ($_GET["NID"]) $Admin->DrawNewsByID($_GET["NID"]) ?>'"> Editor </h4>
It means if there is NewsID in Get, It selects News text in php and tries to assign it into TextAreaText varible.
But it is shown like this:
Because of my bad quotation marks.
As you can see: - source code from my browser
Is it possible to samehow fix it?
Thanks a lot.
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.