I am working on a project showing client testimonials as markers on a google map.
Using server side clustering in SQL and returning a json of field for clusters or markers, which is all working nicely. Some of the testimonials contain richer content, such as image url or video url.
I am using a .JS file marker with labels to show a text banner under each marker showing the rating e.g. 5 out of 5, but where a customer has supplied us with an image, i need to display the image. The marker with label code uses CSS styles to set text or image. I am checking in my Jquery code for a photourl, and if one exists, supplying the right paramters to the marker, however, as the customers have provided these images, they are all of varying dimensions and resoution. The current code seems to sho the photo's actual size hanging off the marker, i tried adding max-width: 60px; max-height: 60px; width: auto; height: auto; but it had no effect. is there any way i can use CSS or jquery to reduce the display size of these images, whislt maintaining aspect ratio?
I have a feeling i am going to have to go through the existing stock, create amended files and update the database to point each record to its new path, which i would rather avoid if i can code around it instead. Once this project is working there will be a big push to get more customer data and i can influence the file saving of future images.
Essentially, I want some code to show an image as thumbnail with max dimensions of about the size of a normal icon on a windows desktop.
Incorrectly using {} not "...". Once, I changed it to:
style =
"max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
"
not style =
{
max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
}
It works as I wanted it to.
Related
I'm trying to use the kendo.alert function instead of the normal javascript alert - but whenever I pass in a lot of text (e.g. lots of paragraphs with linefeeds) the alert box grows past the height of the current window, meaning you can only see the bottom part of the text plus the OK button. Is there a way to enable scrollbars on kendo.alert so you can see all lines?
You could use some CSS to force scrollbars:
.k-alert {
max-width: 50%;
}
.k-alert .k-content{
max-height: 100px;
overflow: auto;
}
DEMO
You could also use JavaScript to calculate available screen height and then set the content max-height accordingly.
Alternatively, use the full kendo dialog and set the maxHeight property:
https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog/configuration/maxheight
I'm a novice to coding and square space and was wondering if something like this was possible on square space: https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/
My company wants me to find a way to have the first image be clickable and bring up another image (depending where you click) to show the availability of the one place you clicked. Then, we also want the second image, when clicked, to bring up the third one.
Is this even possible in squarespace? If so, how do I do this?
To answer your first question directly, yes it is possible either via a Code Block or via Code Injection. Essentially, you would be adding entirely new, custom code to your Squarespace website.
To answer your second question generally, it would be an entirely custom implementation -- that is, there is no block nor build-in feature in Squarespace that will help facilitate this functionality. Therefore "how you do it" would boil down to a good amount of custom code development (again, said generally).
To offer additional perspective: Consider that, on mobile, screen real-estate is more limited (and clickable-areas may become prohibitively small) and that overlaying interactive elements may require additional testing to ensure intended behavior across different mobile devices, operating systems, operating system versions and browsers. Considering these things ahead of time (or perhaps testing during the process) may lead you to reconsider the interactions and UI behavior overall (that is, to get away from multiple overlaying images and to a more vertically-friendly set of behaviors and interactions, just as one possible example).
In the old days we used image-map. It still works. With image-map you can draw a polygon which is a clickable link to another page (or trigger some javascript).
If you want it to scale nicely (in a responsive design) you would need some kind of plugin.
In it's simplest form the links would take the user to another page with another image-map or some other navigation pattern. Example
I guess it would be possible to do this in some custom code block in Squarespace, and just link to several other pages with images/image-maps or galleries.
There are tools out there that can help you draw the polygons (search for "image map generator") if you don't have Dreamweaver or similar.
Other methods:
If you want it to scale without some plugin, you can use SVG instead of image-map. If you are ok with only rectangular hotspots, you can also try this site which uses CSS to replace image-map.
Here is an example using html and css only:
html, div, p, a {
font-family: arial;
}
.map-image {
display: inline-block;
position: relative;
overflow: hidden;
padding: 0;
}
.map-image img {
width: 100%;
height: auto;
display:block;
}
.map-image a {
text-decoration: none;
padding: 5px;
color: #FFF;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
margin: 0;
font-size: 4vw;
}
.map-image a:hover {
border: 1px solid #FFF;
margin: -1px;
}
<div class="map-image">
<img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
Google
Facebook
Linkedin
</div>
(If you are a novice to coding, popup is probably not the right search term in this case. It is easier to link to other pages than to make everything "pop" on the same page.)
My problem is that images on my page (iutm.pl) are displaying properly for instance in Firefox (then I assume there is nothing wrong with my code), but on WebKit or Blink browsers (such as Chrome or Opera) they doesn't.
Maybe it is Paperclip fault which I use to store images (there is need to keep relation between database and images) cause images stored explicitly in assets display properly.
Anyway, i have no idea why everything works in Gecko, but not with other engines.
Thanks in advance.
Bootstrap overrides width and height of your images. The simplest solution is to add width and height attributes to existing styles where you define border for images. This code does the trick.
.event_frame .frame-top .frame-img img {
width: 200px;
height: 200px;
border: solid;
border-color: #b2b2b2;
border-width: 1px;
}
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.