we are using Html frames for our website. Now we need to add some widget on right side and we dont want to make a frame for it too.
Is there any option that this widget can be displayed on the right side, above the frame without affecting the frames?
Or even if i make a frame for widget, is it possible to resize the frame when it is expanded. Because when the content of frame is expanded, half of the content is not visible.
Look at z-indexing here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
And think about absolute positioning. Here is another link: https://www.w3schools.com/cssref/pr_class_position.asp
You could also work with some javascript to hide the widget off of the screen until it is called on. Sounds like a design eye and some research are needed, but there are some good solutions out there for what you require.
Related
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
I've been a user of clipboard.com a clipping service which is about to be shut down, one of the killer features was that you can clip a section of the webpage with all its contents and styling, it was like cropping an image, but instead of static content you could crop webpage content and then later you would be able to open the clipped content with all its styling, images, text, elements like buttons and forms, even flash was in place. And I want to create something similar, but I can't come up with an exact algorithm on how to do that.
From what I understand you can achieve something like that by inlining all styles for each element inside a DOM subtree and looks like this is what guys form clipboard.com did, here is an example of the clip:
a web clip http://monosnap.com/image/CIiUXkvHM3hKFxWkDbJQRtgtW.png
And this is its code in inspector clip code in inspector http://monosnap.com/image/PatIGWGY0ZjfSCdFnfwNkBGzy.png
But I'm afraid this naive approach wouldn't work, for instance if you are clipping a div which has negative margin it will effectively go of the viewport.
So the question is what would be a proper way to implement something like this?
I have an html5 page where I need to develop a small test. There's 2 columns with several buttons and whenever you click on one and drag the mouse, a line follows the mouse movement until it's released, snapping to the next button or getting erased.
I'm using divs for the buttons, since this is to be later delivered to a design crew and they need to be able to change images, texts and placements with css.
My problem is with canvas. I can't place it over the divs, so they don't cover the lines. I've tried svg too, but it has the same problem.
A coworker found the answer. Apparently I needed to use position AND z-index on the css for the canvas to be placed on the layer properly. Go figure
Is there an easy library out there to do something along these lines:
I have a page with a lot of elements. At any given time I want to be able to put a modal on top of the entire page and just highlight one of the pre existing elements on the page to draw attention to it.
Most of the libraries I've seen revolve around dialogs that pop up and then hide the rest of the page. Are there any easy alternatives?
Thanks!
You can use a BlockUI script, then raise the single element's z-index to be above the block.
However, you'll need to make sure it's in the same stacking container; you may need to move it to the <body> and position it absolutely.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.