Been trying for over a day so I am now going to my last resort, posting here. I have a web site with the following code
style.css
#nav li a.active {
background: url('images/top-pages-button.png') 0 -80px;
}
#nav li ul li a:hover, #nav li ul li a.active {
color: #6dff6d;
font-weight: bold;
text-decoration: none;
background: url('images/pages-button.png') 0 -40px;
}
index.php Page
<ul id="nav">
<li>Top Pages
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</ul>
<iframe name="myframe" style="width: 100%; height: 100%; border: none; overflow: hidden;" src="default-page.php"></iframe>
test.php Page
Simple PHP file calling a page with some content/info/text.
The above code works, there is a default page that opens when the site is loaded and when you click on a link it opens the page on the iFrame correctly. HOWEVER, I have the following needs.
I would like to copy + paste a link to share with my friends to the
DIRECT page opened on the iframe. So for instance I would like to
send a link via email to
http://www.mydomain.com/index.php?page=page1.php OR something like
that, rather then tell them to visit mydomain.com and THEN click on
Page 1 under Top Pages.
Also, the site has multiple categories besides just "top pages" so I
would like for the page to highlight where the user is, category AND
link opened. So if I press on Page 1, for the category and for that
link to be "active" and then when I go to Page 2 for Page 1 link to
go back to default and Page 2 to be active and so on -based on my
style sheet.
The entire web site has three parts. Navigation on left, Content on middle, and Chat on right side. I need the chat to be static which is why I'm trying to do this. I do want to be able to send a friend or friends a link which opens that page directly rather than the site and instruct to click on X while the category and link is marked as "active" and change like so as necessary and keep the chat div static the entire time.
Let me know if this is possible with either JQUERY of PHP please. Thank you very much!
In index.php, just add some checks for $_GET['page'] - if that's what you want to use:
<li>Page 1</li>
<li>Page 2</li>
Similarly, for the iframe:
<iframe name="myframe" style="width: 100%; height: 100%; border: none; overflow: hidden;" src="<?= $_GET['page']; ?>"></iframe>
Remember to whitelist the pages allowed (otherwise the iframe will load anything):
if (isset($_GET['page'])) {
if (in_array($_GET['page'], array('page1.php', 'page2.php')) === false) { // not whitelisted
$_GET['page'] = 'default-page.php'; // revert to default
}
}
else {
$_GET['page'] = 'default-page.php'; // it isn't set
}
The above should go on the top of the page (or before $_GET['page'] appears for the first time).
Related
New to coding in general. Creating a simple small website as a class assignment. Using PHP with no frameworks and Bootstrap for the HTML-CSS. Cannot use JavaScript as per assignment requirements.
I cannot find how to properly create internal links in a page.
I use the URL to decide which page to show (all dealt from index.php). Links (via href) to diferent pages in the same website or external links work fine.
But when I try to use what normally would be href="#idName" for a link pointing to the same page, it doesn't work.
I assume it has something to do with how this information goes to the URL and is interpreted by the index.php. But besides that, I'm lost.
Maybe because I don't have the right vocabulary to search for it, but so far, no luck when looking for the answer online.
Part of the index.php:
if (isset($_GET['action'])){
if($_GET['action'] == 'profil-membre'){
include('pages/header_menu.html');
include('pages/profil-membre.php');
}elseif ($_GET['action'] == 'page-activite'){
include('pages/header_menu.html');
include('pages/page-activite.php');
}
}else{
include('pages/header_menu.html');
//and below the html for the main page.
?>
And part of the html in the pages where I would like an internal link:
<!--a menu as tabs (showing just the part with the problematic href-->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#membre-exist">Membre Existant</a>
</li>
<!-- the href should point to the div with id "membre-exist" -->
<div class="tab-content card card-body mb-4">
<div id="membre-exist" class="container tab-pane fade"><br>
<form action=""> <!-- and the html code follows normally -->
Any ideas or links to where I could find the information to solve this would be appreciated!!
If I understand the question correctly, you can use :target CSS pseudo element and use that to show the contents using display. I am doing something really simple for you.
* {margin: 0; padding: 0; line-height: 1; font-family: 'Segoe UI'; text-align: center; border-radius: 5px;}
a {display: inline-block; padding: 5px; border: 1px solid #ccf; background-color: #eef; text-decoration: none;}
a:active, a:focus {background: #f90; border-color: #f60;}
section {margin: 10px; padding: 10px; border: 1px solid #ccf; background-color: #f5f5f5; display: none;}
section:target {display: block;}
one
two
three
four
<section id="one">
This is section one.
</section>
<section id="two">
This is section two.
</section>
<section id="three">
This is section three.
</section>
<section id="four">
This is section four.
</section>
The above code acts like a tab view and it doesn't have any JavaScript or Server Side code. It purely relies on the #hashvalue that's passed to the URL. The above code perfectly matches with your requirement:
Doesn't use any server side language.
Doesn't require JavaScript for this.
It's a pure CSS way of doing things.
I'm having a weird issue with the way my Category page is displayed, elements of the selector are displayed in the body tag. This is causing an alignment issue with the navigation bar and the logo header.
Strangely enough this issue occurs only on the Category Page (Archive.php) while the same header.php file is loaded in all of the templates (homepage, product page, category page etc).
I've tried to disable all of the plugins but with no success and also reverted to the original archive.php file but the results are the same.
see the following link: http://www.best-foods-for-fat-burning.com/wordpress/?product_cat=%D7%91%D7%A9%D7%A8-%D7%91%D7%A7%D7%A8
Any assistance or guidance is well appreciated.
Regards
Ofer
Though it is very difficult to debug css without having the actual files in hand, but i think that the right padding in current_page_item is causing the problem,
nav li.current_page_item {
padding-right: 13px;
display: block;
height: 40px;
}
Change this to,
nav li.current_page_item {
display: block;
height: 40px;
}
And let me know. Think it should work.
I have a php page which generates links based on results from an "USERS" table, "NAME" row.
I'm using a jQuery tooltip so that a div appears when those links are hovered.
When the hover happens, I am able to get the link's text using $(this).text(), however, I don't seem to be able to parse the result so that it can link with PHP, as I want to display in the 'hidden' div certain info about the HOVERED user (e.g. his e-mail address).
Something like: When "Mike" is hovered, show Mike's e-mail address in the hover div.. and so on.
I've tried with cookies (when mouseover happens, I used something like:
$.post("gophp.php", {"name":$(this).text()}, function(results) {
nada
});
, with gophp.php setting a cookie with data from $_POST['name']) - the div inside the other page is then able to show the cookie, BUT if I hover some other link, the data which is displayed remains the same because the page has to be reloaded.
Please help me, I'm going nuts.
why are you trying to use cookies?
Why dont you use:
$.post("gophp.php", {"name":$(this).text()}, function(results) {
$('div').html(results);
});
and in your gophp.php:
<?php echo 'some_mail#address.com' ?>
(You have to adapt both php and jquery to your situation)
This seems a horrible way around what you're wanting to do. Just have the email address on the page, but initially hidden, and show it on hover.
For example, in your HTML have:
<ul class="people-list">
<li>
<a href="">
<span class="name">Martin Bean</span>
<span class="email">martin#example.com</span>
</a>
...
</li>
</ul>
And then to style it:
.people-list a {
display: block;
width: 100px;
position: relative;
}
.people-list .name, .people-list .email {
display: block;
}
.people-list a .email {
display: none;
}
.people-list a:hover .email {
display: block;
}
Should do the trick in a primitive fashion. You can then position/style as necessary.
Of course, why you want email addresses public available is a whole different topic of conversation.
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.
Below is an image showing the different actions it does when clicked on.
I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?
Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Once you've done that, you can use CSS to position the tooltip and show it when necessary.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone's hovering over the button. */
display: block;
}
To show the drop-down box, you probably will need JavaScript. Add another element to the container:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:
$('#button').click(function() {
$('#selection').show();
});
You can then make your sub-items do whatever they like, as long as they also hide #selection.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Finally, you want to change the background and text colours upon hover. That's easy enough:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.
Here is the approach I would take:
For hovering check out jQuery's hover event to change the different image states
For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
For clicking, jQuery's click event will do the trick
The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.