php action interfering with css - php

Ok, I have page one(index), fully functional and working fine as is with all content loading into an iframe. However, due to the layout's design, I wanted my portfolio to have more space for viewing, so I created another page for the portfolio (p.html). Now, since there is no way (that I know of or could figure out) to click a link on p.html and tell it to open for example home.html#top within the iframe named "content." So, I toyed with some php and came up with the following code:
<?php
switch($_GET['go']) {
case 'home': $src='pages/home.html#top'; break;
case 'about': $src='pages/about.html#top'; break;
case 'contact': $src='pages/contact.html#top'; break;
default: $src='pages/home.html'; break;
} ?>
Then, on index.php, in the iframe I have <?=$src;?> set as the source.
Now, when you first load http://www.djcproductions.net, everything works fine, the default page home.html loads in the iframe as it should. However, click on any of the links in the nav bar and it will somehow class with my CSS for the content. If you pay attention when you first go to the site, and scroll down to the text, you can see the background image as the contentstyle.css file is set up for home.html to have a transparent background. But, once you click any link, that goes out the window and the background is not transparent EDIT and it also seems to shift the page loaded into the content iframe to the right about fifty pixels. So, since the default line of code for the home.html in the php code worked as it should, I thought maybe it was the #top messing stuff up. So, I removed all the #top tags from the links, and tried it again. Again, on load the page is fine, then I click a link and my whole index.php page loads into the iframe?! My mind is blown. Am I doing this all wrong, or is it just one stupid line I am missing or something?

On the issue of the About Us page not loading. Here is my summary of the issue.
If I manually put http://www.djcproductions.net/index.php?go=about in the browser address bar, it all works. This means your PHP switch statement is happy as long as you supply the request paramter.
When I look at your link, it has a target attribute:
<a class="about" target="content" href="index.php?go=about">...
This means it is loading the whole page into the iframe, which I'm pretty sure is not what you are trying to do.
If you change your hyperlink to:
<a class="about" href="index.php?go=about">...
It will work. Equally, if you change it to:
<a class="about" target="content" href="pages/about.html">...
It will work.
Just don't use the target and the full page link together.

Firstly, disabling right click is annoying for people trying to help you look at problems on your website and is ultimately pointless as I have got to the source anyway.
The problem that shows itself on p.php is that your image source for your social network images is incorrect. This causes the alternate text to be displayed (or a broken image glyph) and as your design relies on the size of those images, everything is mis-placed.
Changing the image source on those images fixes this issue.
images/p_05.jpg
Should be
images/image_05.jpg
And the same for image_03
There are other issues too, but you need to isolate each one and ask a question specifically about it. If you create a smaller example of your problem it also helps people to help you.

Related

Some elements missing / changed when trying to change from html to php

I'm asking for help for those who have experience in changing an html file to a php file. I've tried everything I know (and I'm not the smartest I admit) but I don't understand why the following is happening.
Currently: When viewing on mobile, the mobile menu button has gone, the toggle switch which changed prices from monthly to annually, tabs which displayed different content has gone. As a result:
If there was a toggle, both the toggle results are displayed one above the other
If there was a tab, each tab element is displayed underneath the other
The mobile menu button has gone completely
Background:
I purchased an HTML template but it turns out the seller didn't want to help. I wanted to split and convert the page into a php page as I wanted a single header/footer file which I could import. As you will see (if you check the repo) the header.php and footer.php file is getting imported into the page php file.
I created the pages by first:
Renaming the original html file to a php file
Cut the header and footer and import them back into the page php file
That's all I have done. It seemed to work, however another check (after cache cleared) I noticed the issues.
The link to the site page im referring to is:
https://blueboxhosting.co.uk/products-cloud-hosting
But if you look at any of the pages, you'll see errors on all of them now where they're should have been controls (eg toggles, mobile menu, tabs etc)
I've created a snipped so you can view the code and HOPEFULLY spot where I've been a moron:
https://bitbucket.org/snippets/bbhostinguk/7e5qxp
Any help with this would be amazing as I just can't figure it out.
Start by running the HTML generated by PHP through a validator, e.g. https://validator.w3.org/
Your code has numerous stray tags which may or may not affect the rendering.
Another tip is to comment off everything and then uncomment section by section and check when things start to break.

Google Chrome won't update CSS

I just started working on a Wordpress theme, but it won't reload the stylesheet after I update. I searched throughout here and tried the common remedies, including:
Reload holding ctrl/shift
Reload while Developer Tools is open
Reload twice quickly in a row
Get firefox/firebug
Add the timestamp generator to the end of the href
Install an extension, specifically this one: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?utm_source=chrome-app-launcher-info-dialog\
It seems like it only reloads every once in a while, and it really impedes my ability to write CSS...
Does anyone here have any ideas to fix this?
Thanks.
edit: I think it may have something to do with my host (it's free). I'm just going to move offline for development, I think.
You can always go into Incognito which does not use any chached data. It also does not save any history information.
To use it you can press Crtl+Shift+N then navigate to the page / website that you want to see.
You can also access Incognito by pressing the ☰ icon in the top right of your chrome window and click on New incognito window:
If your page is still not updating I would make sure that the file is even being saved. Because at this point your issue would not be because of files being cached..
My only other thought is that it could be your CSS itself... Sometimes your CSS is not applied due to an error in your code, another piece of code counteracting it, etc...
So see what is being applied:
press F12
OR
right click somewhere on your page and press Inspect Element.
You should see something like this (except with your code / webpage):
The parts of the "Inspect Element" will be sized slightly different but you can change those around...
Essentially click on the html element that you are trying to change the css on...
You will now see what css elements are being displayed... If they are crossed out, it most likely means that there is some other parent (or just some other property) that is canceling out the css you are adding.
These are just some of the reasons why the CSS may not be working! But I hope this helps!
When working with child theme, make sure you are loading the right css file. Sometimes you load the parent's css file.
Make sure to disable cache plugin in development time.

Defining New Window Target When Linked from an Iframe

I was asked to create several websites that essentially mirror a specific live website. With the difference between the live site and the new sites being that there is a floating header that displays at the top of the page no matter how far you scroll down. This is the same technique that sites like StumbleUpon use. My initial thought was to use an Iframe, for the view portal and a absolute div for the header. However I was then asked to make it so that when someone clicks on a link within the iframe that they be taken to the actual site, in a new window. This is the part that has me thrown. Is there a way to tell the I frame to open all links in a new target? If not what would you recommend?
See attached image for clarification:
Targeting blank in the anchor should work just fine here.
<a target="_blank" href="http://google.com">google</a>
With some cross browser hacks you may be able to tell when the iframe src changes, on that basis you could then reload the page in a new window. It isn't possible though to tell what the new URL is, so it won't be the best user experience as you'll be sending them back to the page that you loaded originally.
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/

How can I place a photo on someone else's webpage when linked to from my site?

I know this is a strange thing to want to do, but...
How can I place a photo at the top of someone else's webpage ("Page B") -only- when a visitor links there from my page ("Page A")? I have permission to do this, but with certain limitations: my code needs to be in one location on Page B, and I can't make major changes to Page B. I cannot use Page B's server to run PHP, but I can run PHP on Page A's server.
The photo needs to open automatically with the rest of the Page B, and not require any user input to show up.
This is a unique vendor/retailer situation, so unfortunately I can't provide the urls.
Thanks for any help.
In PHP, you'd do something like:
<?php
if($_SERVER['HTTP_REFERER'] == 'http://www.yoursite.com/referringpage.html')
{
printf('<img src="yourbutton.png">');
}
?>
Which is very limited because:
It will only work for a referring single page (referringpage.html) and not otherreferringpage.html
It will only work for a single landing page. If the user navigates off of the page, then back (not through browser's back), the button will not show up.
To solve the first you could do a substring of the referrer, e.g.
<?php
if(substring($_SERVER['HTTP_REFERER'],0,24) == 'http://www.yoursite.com/')
{
printf('<img src="yourbutton.png">');
}
?>
To solve the second you could set session variables (except then you'd need access to the very top of the "outermost" page -- which doesn't sound like an option.)
Depends on the design of the page.
Lets say,
If the page is divided into frames, then you can use iframe.
if It's a single page, try have a separation with div tag. Insert the html into Div Tag.
If the above two points won't help you,give an idea of how the page is designed
I think a simple answer would be to write a html page (lets call it linkPage) that has the image/text/div or whatever you want to display on the top and then include an iframe that would cover the rest of the page using css. You could pass the page you are linking to as a GET or POST parameter to the linkPage and then set the src of the iframe to that url.
There are probably other ways of doing this that are more complicated / seamless but this would be the easiest, quickest way to get it done.

Load on page inside another onClick

I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Categories