I wish to animate a page always from the right when switching between two pages. Why? Because the 'next' page is always dynamically loaded. Is there a neat way to do this? I am self answering with a hack, however I am looking for a way that isn't messing witht the DOM.
It is possible to achieve this effect by switching the DOM order of the elements instead of switching the selected property of the <core-animated-pages>. A way to do this can be found in this answer. The disadvantage is that it makes is very hard to switch between transition types (if so you were to wish) and makes for some ugly code either way.
Related
Long ago at a conference talk on React I saw the presenter add something to his code that allowed you to click-drag a divider on the screen by getting to within a certain number of pixels of it, rather than have click exactly on it.
It's a handy concept for improving usability, though I don't know what it is called. Adding 'slop' perhaps? Anyway I completely forget how he did it, presumably using some padding approach. Does anyone know what this practice is called and how to implement it? I assume it was something he achieved it with CSS but am not sure.
You can use vanilla js to do that. Using element.getBoundingClientRect() to retrieve the element's offset relative to body and comparing with the actual mouseX and mouseY(in the click moment of course) you now know the distance between the element and the click, now add some logic like: Case distance < acceptable offset then do some side effect.
I've a CSS dropdown menu containing a select box that extends beyond the menu's
bottom border when opened. Subsequent clicking on a select option that lies beyond
the menu's bottom border causes the menu to close (i.e., ":hover" no longer applies
once the select closes).
Is there a way around this? It'd be great if I could force the select to "drop up",
but I've not found a way to force this to happen.
Any ideas?
One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.
Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.
With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.
The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.
Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.
Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.
Or you could run some Google searches and find more!
In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.
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');
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.
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.