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.
Related
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.
I imagine that the answer to this question is no, but just in case I'm going to ask it anyway.
I want to use know if it is possible to use html5 drag and drop functionality without adding markup to the html (i.e., without adding draggable="true".
The reason I'm asking is because I want to use this within TinyMCE but I do NOT want to publish to the front end dragabble="true". I only want the drag and drop to function in the backend.
Any ideas?
P.S. I imagine I could see if there is a filter within TinyMCE for when the content actually gets published to the front end, but I would first prefer to see if it is possible to do this without a filter.
These things are draggable by default (ie. without any kind of attribute):
Links
Images
Selections
If you can make everything you want to be draggable be one of those things then you're OK, you just have to handle the events in the normal way. The easiest ways I can think of are:
Absolutely positioned images as 'drag proxies' (if they're absolutely positioned then they'll be out of the document flow)
Automatically select text on mouseover
However, I think it would be far more simple to add and remove the draggable attributes dynamically, eg. with jQuery (perhaps in the save event of TinyMCE):
$('#editor *').removeAttr('draggable');
I am embedding simple html and css that i've written into another application using an iframe. Within my code, I am using CSS to create context menus when you hover over elements of the page. When I get close to the edge of the iframe with the hover menu, however, it gets cut-off and stays below the frame. I've tried many different variations of z-index, but nothing has worked. Is there a way to get this menu to show above the parent window?
Any thoughts on this?
Any positions and rules for belonging to the CSS stacking context are limited to the current document. This can't work using z-index, since the iframe-contents are a complete different document. You can't have anything "bleed" out of an frame. If you want to have an overlay, don't use an iframe at all.
I've created a simple tabbed content display using CSS and HTML. This code will be embedded around halfway down a much longer page with other content.
Here's the jsFiddle: http://jsfiddle.net/ollyf/R9rq2/
I've made use of :target but I'm not entirely sure how it works. Read a few tutorials but I don't fully understand the behaviour. I feel like this is bad/inefficient code.
Is there a more efficient way to achieve this tabbed content effect?
If not, how can I reveal the content without the scroll position snapping to the top of the DIV?
The :target pseudo selector is triggered by on page anchors. This means when your URL is http://www.example.com/#anchor1 #anchor1:target styles would be activated. The page is also scrolled to the #anchor1 element. This is the default functionality in browsers.
The other option for achieving a tab effect is through the use of javascript. The concept is the same with javascript, you are still toggling the display attribute via click handlers. There are several ready made scripts available for tabs. Here is one example http://jquerytools.org/demos/tabs/index.html
Hope this helps clear things up.
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.