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
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/
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 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";
I've been looking all over the place but can't seem to find an issue quite like mine. Maybe I haven't been putting together the right keywords; but perhaps I'll have more luck just explaining my issue.
I've put together the following little code:
$image_types = array('gif','png','jpg');
$recent = array();
foreach($image_types as $image_type) {
foreach(glob('first/second/*.'.$image_type) as $filename){
$recent[$filename] = time() - filemtime($filename);
}
}
$recent = array_keys($recent, min($recent));
$recent_img = $recent[0];
What it's supposed to do is look into a specific folder and find the latest image and, later, place it into the webpage. What it does do is find the latest image, path and all. So everything is working up to there. If I echo $recent_img I get the latest image's src, so obviously I'd want to place the following code right after: <img src="<?php echo $recent_img ?>" /> and I should get the image. Surely enough, everything works fine, even up to the point locating within the HTML an <img> that refers to the image I need. HOWEVER, there's something going haywire at this point!
If glob() is set to the path first alone, the code works entirely: the image is shown in the website. But with the second folder added, it does everything except show the image on the website.
So I go to the result website and check the source code and the image code is as follows:
<img src="first/second/img.jpg" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;" width="0" height="0">
Notice the display:none!important the visibility:hidden!important etc., almost like the CSS is set to do everything it can to avoid showing the image. Including setting the width and height to 0 when the image is obviously not 0 x 0 pixs. (Just in case: nor is there any instance in my style sheet which would result in setting everything to 0 and hidden and etc. on any image in my project.)
However, as I said, this does not happen when the path only has the one part, the folder first. I've tried putting all the images from one folder into the other and still the issue remains. I've edited the CSS values on the spot in Chrome and still nothing.
It seems like an absurd issue to have because nothing is changing except the code is looking for a file inside of a folder that is inside a parent folder. Moreover because the code actually works to the point of showing the file I need and its path but not the file itself.
Online trial example for you guys to see and TEMP solution or, rather, 'workaround'.
I hate working around an issue. It usually complicates things and/or makes them messy. First of all, in this case it is an organization issue. It's much better to have ALL images in one folder and then make sub-folders for different kinds. Having many image folders floating about the root is not a good idea to me. Second, it seems absurd to have to use a 'workaround' when there seems no logic in the error. Third, I really would like to learn what is going on and not turn this into a PHP Bermuda Triangle. So please don't take my TEMP solution as me giving up, and please continue the synergy of this wonderful place, where no doubt at some point we'll arrive to a solution.
At any rate, the 'workaround' you've probably already guessed is to place the second folder in the same directory as the first folder, which is the root. So this should solve that specific issue. But it's not a genial solution if you ask me.
I've been asked to upload an online trial of the issue and I've done so >>HERE<<. You'll be able to see the same code looking for the latest image in first/second/ and in first/, and you'll see that one works marvelously where the other mysteriously flops!
QUESTION: Just occurred to me. Could it have something to do with the length of the path name? I.e. first/ is O.K. but first/second/ is too long? Doesn't make much sense taking into consideration that the retrieval of info from the path is successful, and the issue is rather on the side of the HTML outcome, but I have since tried placing the second folder in the root and gave it a 10-letter name and the issue was recreated. This, however, only happened in WAMP localhost, as when I uploaded everything online, the length didn't seem to matter. However, even online, as you can see from my LINK the first issue remains.
You can try retrieve the src and update using jquery:
$.get('image.php').success(function(src) {
$('#myimg').attr('src',src);
});
I have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.