site in progress: http://www.modernfuture.net/wordpress
I've been trying to maintain cross-browser continuity and I came across a media query hack that targets chrome 1+/safari 3+
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* ... */
}
I've used this to restyle #social .logo-img and .featuredThumb differently in chrome/safari as they were positioning these elements differently than in Firefox 23. Using this awesome bit of code I was able to restyle #social, and .logo-img but not .featuredThumb. My guess for the cause of this is that the .featuredThumb class was generated in PHP but I'm not sure why this is happening.
Here's the piece of PHP code that's generating the .featuredThumb class
<?php the_post_thumbnail(array(287,250), array('class' => 'featuredThumb')); // Declare pixel size you need inside the array ?>
I could really use some assistance with this matter please! Thank you all!!
I think you need to change
top: 92px;
to:
top: -92px;
that works for me. Not sure if this is what youre after :/
Related
I am trying to pull images from a database into an html table as a php variable:
<img src=img/$image&w=100&h=150>
the image does not show, but everything else in the table pertaining to the product shows
If I change the code adding a space after the variable:
<img src=img/$image &w=100&h=150>
The images show but they are very large.
How do I get $image to show at w=100 and h=150 within the table?
Thanks!!
OK I figured it out:
CODE:
<img src='img/$image' class='scale-down' style='width:100px;height:150px'>
CSS:
.scale-down {
object-fit: scale-down;
}
If the code below doesn't work for some reason, be sure you linked your CSS file.
CODE:
<img src='img/$image' class='scale-down'> <!-- Removed style attribute --!>
CSS:
.scale-down {
width:100px;
height:150px;
}
Another interesting point is if you want to you the object-fit then you can. Meaning you would have the images contained by the size of the elements you are putting them in. Therefore, you should be defining the width & height of the element that contains the images and then you can do as you did:
In this example I wrote td but I don't know what element contains your images so be sure to change it, if it is different.
td {
width:100px;
height:150px;
}
.scale-down {
object-fit: scale-down;
}
If your aim is to learn web-development then you should also be thinking about the client as kerbholz rightly points out:
Probably. Scaling down an image via CSS/style isn't a performant solution though, clients would still need to transfer for example a 1920x1080 image only to scale it down to 100x150. Anyway. – kerbholz
Please be aware that many questions about web development have already been answered here and on the web. Good luck!
The following are links to CSS, these websites have a lot more than just CSS.
MDN is really useful if you want to know more:
https://developer.mozilla.org/en-US/docs/Glossary/CSS
W3 is also useful but they don't always do as good of a job:
https://www.w3schools.com/w3css/
I'm using Wordpress to create a blog and I noticed that when I save a post multiple times, a weird element appears in the code, creating a big white space in the bottom of the post.
The code looks like this:
...post content
<object id="ba7ab859-2a8a-9fa1-988a-4a9938aba59b" width="0" height="0" type="application/gas-events-abn"></object>
Every time I edit a post I have to remove it. With Joomla sometimes used to happen the same thing. What can I do to solve this?
This tag is added by protection bank plugin developed by Gas Tecnologia, a brazilian company, expert in internet security. This company provides service to the banks: Banco do Brasil, Caixa Econômica Federal, Itaú, Santander, Banco Mercantil do Brasil, Banco da Amazônia, Banestes, Tecnocred/Unicred.
I contacted the company to find out why the "tag object", but so far not replied.
If you wish this is the link to site of company: http://www.gastecnologia.com.br
As said by Vinicius Monteiro, this is a serious bug from the crazy devs on Gas Tecnologia. The hack-ish way we're using to solve this is adding this piece of CSS to your pages:
object[type^=application/gas-events] { display: none; }
I did some adjust to hide all elements with contains the word application/gas-events:
object[type*='application/gas-events'] { display: none; }
Your site (or browser) has been hacked. You can find the same string with varying id in some forums:
social.msdn.microsoft.com
social.technet.microsoft.com
answers.atlassian.com
forum.dancehallreggae.com
many more.
Other findings
Most of the affected sites are Brasilian.
According to this tweet, the tag is generated by a Santander protection module.
Same thing with "GBBD Caixa Economica Federal" extension (Chrome), putting this "application/gas-events-abn" everywhere. Seems to be a common problem with intern banking extensions.
And to get worst it's impossible to deactivate while not using internet banking (at least in Chrome), the only solution is remove the extension or clean the post content field AND the excerpt field if it have tinymce activated.
body + object, body + object + object { display: none; }
I placed that on my Stilysh Chrome Extension and solved the problem just fine since they put the objects always in the footer (in my case there where 2 of them, CEF (caixa economica federal) and BB (banco do brasil) if you have more banks, just add more objects ;)
In my case, the class object had height 100%. I just commented the code.
object, embed{
/* height:100& */ I commented this height, because it leaves a space under the footer;
}
coding a responsive site I want to implement a switch between a mobile version and a standard desktop version like the Wikipedia site does.
For this I should have to re-load the current HTML file but force it to use the CSS file for desktops although it is on a mobile screen such as an iPhone.
Is there any possibility to do so? I think Wikipedia uses PHP. But perhaps there is also a way with JS.
I would be very thankful for help. Thanks in advance.
#media handheld {
#foo { position: static; }
}
http://www.w3schools.com/css/css_mediatypes.asp
I think with USER_AGENT you can find if the user is using the site using web or mobile.
Detect the user agent look for some specific information and on the basis of that load different css
$_SERVER['HTTP_USER_AGENT'];
You could also use a php script that checks for the end device, loading a corresponding css file, or even a completely different html document. I worked from this script.
<style>
#media screen
{
p {font-family:verdana} //an example with a paragraph
}
#media handeld
{
p {font-family:arial} //an example with a paragraph
}
</style>
This should work for both!!
read up http://www.w3schools.com/css/css_mediatypes.asp
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I am having trouble using a script I found at http://www.marcofolio.net/webdesign/use_a_custom_font_on_your_website.html
The problem is, when I load a page, the text shows up then each word is replaced by a generated image of it using the PHP GD lib.
It creates a flicker effect that I can't seem to get rid of. There are options is the js file:
var hideFlicker = true;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 0;
But when I change any of those settings, nothing happens.
Please help!
Thank you.
For what you seem to be trying to do, image replacement is an extremely outdated method. All the ninja-devs are using technology called #font-face for their fonts and font replacements.
It's simpler, doesn't require anything to happen on the server and text on the page can be modified dynamically.
You can use services like http://www.fontsquirrel.com/ or http://code.google.com/webfonts for ready made font packages.
If you have a custom font (that you have a license for) you can create an #font-face package for it, using fontsquirrel's #font-face generator: http://www.fontsquirrel.com/fontface/generator
And then you just define your fonts in the CSS. Simple, elegant and works in 99% of browsers (yes, even IE6)
Cheers!