I am using jssor slider in my site .
It works fine in every browser except in windows chrome it is showing blurry text.
I already tried setting the $HWA option to false.But still blurry text is coming up.
How to fix this issue.Thanks in advance.
It is most likely the responsive problem.
If you scale your slider larger than the original size, it may look blurry sometimes.
The way to fix it is to make the original slider bigger with larger elements and font size.
In this manner, it should look better when it scale to smaller size.
To avoid blurry text and remain slider responsive with jssor slider,
some certain change is required in file name called 'jssor.utils.js'.
In line 1045 transformValue += " perspective(2000px)";
change to
transformValue += "none";
And line 1092 elmt.style[GetTransformProperty(elmt)] = "perspective(2000px)";
change to
elmt.style[GetTransformProperty(elmt)] = "none";
Related
I would like to set the gif file in the featured image. I would like it to run when I hover over it with the mouse.
I know I should set this in functions.php file
Together with the code:
add_theme_support ('post-thumbnails');
Unfortunately, I have no idea how to do it. I create my blog and I have never done such things. Could someone help me how to do it?
Thank you for your help!
When you upload an animated GIF to WordPress, it does all of it’s resizing magic to make the various thumbnail sizes (defaults are thumbnail, medium and large, in addition to the original full). When it does this, the resized versions lose their animation.
If your theme displays featured images at any size other than full, you’ll thusly lose your GIF’s animation.
If you definitely know that you want to display the animated version, though, there’s a little trick you can use.
<?php $thumb_url = get_the_post_thumbnail_url();
$thumb_low = strtolower($thumb_url);
if (strpos($thumb_low, '.gif') === false) {
$thumb_size = 'large';
} else {
$thumb_size = 'full';
}
?>
What am I doing here is getting the URL of our featured image, then I make sure it’s all lower case letters (WordPress may do this anyway, but just to be safe), then I check to see if .gif is present in the thumbnail’s URL, and finally, if it is, I set the thumbnail size I use to ‘large’. Doing so will allow me to use the original image, which retains it’s animation.
Then, I just need to tell our call to the_post_thumbnail() to use the variable thumbnail size we set, like this:
the_post_thumbnail($thumb_size)
If you’ve ever tried to set an animated gif as a featured image in WordPress, you’ve probably discovered that you can’t.
The reason why is pretty simple. Your theme grabs a resized version of the featured image you upload. And in the case of an animated gif, that means it’s not grabbing the original gif image, and so you end up with a static image.
The way around this is pretty simple, however. You can just install a plugin that automatically sets the featured image from the first image in a post. Of course that means you will need to make the animated image the first image, but at least it’s a workaround.
There are a number of plugins that will let you automatically set your first image as the featured image. I tried two and the both worked: Autoset Featured Image and Automatic Featured Image Posts.
Something else I found was that I didn’t even need to download the gif. I could just insert it with the URL.
Hi so I added a video into the front-page.php code using the following code:
<div style="text-align: center" id="video">
<iframe width="867" height="488" src="https://www.youtube.com/embed/6c7Fx2PR9Dk" ></iframe></div>
(sorry for some reason the code editor is not working)
however when I try to change the width and height in the mobile mode using #video, it does not change. any help is appreciated!
EDIT: I added a class=container and changed the width to 100% and height to auto. This worked a little better but now the height of the container needs to be bigger. I cannot seem to find where to add the code to edit it.
I cannot see your code but I am sure it would be way easier to achieve this using CSS and media queries. Assuming your video player is configured to take 100% of the width of the container it sits in.
Actually you have to use the following cass to make it full width
#video iframe {
width:100%!important
}
Fitfids.js is really nice plugin to make the iframe, video embeds responsive. You may try to use that for your ultimate video responsive solution.
I'm trying to use DomPDF to generate a PDF out of some HTML. I need the page to be 20mm x 20mm, so I use the following:
CPDF_Adapter::$PAPER_SIZES['my_square_page'] = array(0, 0, 566.929134, 566.929134);
$dompdf->set_paper('my_square_page','portrait');
It works properly, if I check the PDF properties the size is ok. The HTML that will appear in the PDF has a container div of 490x490px. This size cannot be changed, as the elements inside that div are absolutely positioned.
The problem, then, is that in the generated PDF the div does not cover the entire page. I've tried setting the DPI, using different values in
def("DOMPDF_DPI", 150);
But it does not seem to make any difference at all. The output I get is this (gray borders are from the PDF reader):
I've tried setting the width and height of body and html in the CSS of the content, but it does not work.
You can check the source code of my sample case here.
Ok, I figured it out. Looks like the line
def("DOMPDF_DPI", 150);
does not actually do anything. I did change the dompdf_config.custom.inc file and then it worked. Added this:
define("DOMPDF_DPI", 62.230);
But now the images look too big :S
I'm having issues with adsense on responsive design. One solution I found is to not load them at all if window size is not big enough. So I thought I would create a separate php file with advertisement code, container etc... and than include it on a page. However, I can't figure out how to only include this file if, lets say, window width is 720px or above, else don't include this file.
Perhaps, javascript can be used some way, not sure how it will work with all the dom and php includes though.
You can try something like:
<script language=javascript>
if (screen.width >= 720 )
$('#place_holder_div').load('file_from_server.php');
</script>
Here #place_holder_div is a div in your html file. The syntax is Jquery but of course you can use plain javascript if you wish. The code looks at the screen width and if greater than 720 pixels, loads the php file file_from_server.php (which will contain your ad) into the placeholder div.
The only way to know what the window or screen size of a client is, is by using JavaScript.
window.innerHeight; // Available height of the browser for the document
window.innerWidth; // Available width of the browser for the document
window.outerHeight; // Browser height
window.outerWidth; // Browser width
window.screen.height; // Screen height
window.screen.width; // Screen width
After inspecting these, you could do a HTTP request for the relevant file. It is, however, probably not the best solution since the user can actually change any size mentioned above at any given time.
I am using jScrollPane on my website and everything works fine but I want to do the following: Currently the track has a width of 100% (it stretches as much as the content does) but I don't want to make it stretchable as the content, I want it to have a fixed width of for example 400px.
Is there any chance that can be done? I have tried changing it in style.css but doesn't seem to work :(
Thank you
http://jscrollpane.kelvinluck.com/settings.html
horizontalDragMinWidth = 400;
horizontalDragMaxWidth = 400;
i think this will do the trick