Ok, so I have this li list with about 24 list elements. I want the webpage to be able to automatically scroll to the point where I assigned a specific li active/current on onload. How can I do this using JavaScript?
Javascript has a Window Object Method, scrollTo(), for scrolling (read about it here: http://w3schools.com/jsref/met_win_scrollto.asp). However, this can be inconvenient if you don't know the exact coordinates you want to jump to. One alternative worth trying is using a named link like <a id="active"></a> and telling JS to load the page with #active at the end of the URL. That's always an easy way to force scrolling.
Related
I want to add a ripple effect to the header of a card, because it is touchable. I don't want to make it a button, though, because
The CSS would get a bit weird, as I want to do some custom things with it
It doesn't really represent the semantics of what it is.
So, my question is, I'm creating a directive for this sort of thing. How do I manually add the ripple effect on click/tap for it?
Thanks!
You can install ionic-ripple and attach it to whatever element you want to have the effect on
https://github.com/DarrylD/ionic-ripple
after reading the source code of ionic 2, i find that you can add the 'tappable' attribute to the DOM that you want to have the effect, then append the element <div class="button-effect"></div> as the child node of the target DOM. make sure your target DOM have the style position: relative;overflow: hidden;.
the above method
the another method is add the two ion-button clear attribute to the target DOM. this way also have to modify the style.
the image show the element can get the given "active" style
I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.
In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:
By default ReactTransitionGroup renders as a span.
You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.
Im a little newbie working with Aplication Express, I want to create an aplication which its structure could be something like this example.
http://apex.oracle.com/pls/apex/f?p=36648:1:110593396161288::NO
Anyone have some ideas to create it?
I just tried creating a List from Shared Components and then set it in a region with Page Region Template Position 3 and another Chart Region with Page Template Body (3), but in my case the side bar is placed on the right when I want it on the left... I have tried all the Template Position combination as possible.
Also when I click a value from the list, the page is opened on another tab. How can I open it on a specific region? As a frame for example
Any help will be greatly appreciated
Having a left sidebar depends on the page template you select. Some page templates will have a left sidebare, other a right one, others maybe both. And since templates are part of a theme, it may be that some templates under some themes may not have a page template that offers what you'd want.
So the first you need to do is look at what page templates you have available in your chosen theme. You can do this by going to the Shared Components and selecting templates from there. Scroll to the Page Templates and see if you can find one there.
While it's a good guess that the sidebart region will be in position 3, and position 3 is in the sidebar, it's best to verify. You can do that by checking the html of the body of the template. See if there is a region assigned to a sidebar. You'll have to divine this from the markup or an example page and which one it is (position 2? position 3? 4?).
Pro-tip: from the Shared Components > Templates, in the report overview, you can preview certain types of templates, such as the page template. Just hit the preview button and you'll get a general idea of the style and the region positioning! When viewing the template in detail, you can also preview from the preview link in the right hand menu list.
As for the list: the example you linked has a list region on the left sidebar, but all those links are links to other pages. Thus, there are as many pages as there are links in the list.
If on your environment the links are causing a new page or tab to be opened up, then that likely means the attribute target="_blank" is present on those anchor tags. Again though, this just means that that markup is being generated by the chosen list template. Try another list template (by editing the list, under Source you can chose the template) or take a look at the theme's templates. You can find the markup for the individual list items there.
It'd be better not to concern yourself too much by trying to fiddle around with iframes just yet, because even though that'd be possible it is not an out of the box feature. Unless you're already really familiar with eg javascript I'd stick to page links until you're more familiar with the environment.
This may be a question already asked before, but I couldn't find anything on it, and it's a tad strange, so I thought I'd ask it here.
My question is this: is it possible to use a div as a background image for another object, in this case a dt tag in a definition list?
I'll explain it a little more. I have a definition list that organizes to-dos on my page, with the dt being the title of the task and the dd being the description of the task. I also have a div floating to the left of the dt styled to look like a blue circle, which I use as an unread indicator. This works fine on the first dt and dd pair in the list, but afterwards causes the other pairs to get all smashed together underneath it.
I also know that using divs inside of a list is frowned upon, so my ideal solution would be to use the div as a background image for the list, sort of like what Chris Coyier did here: http://css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/ with images. If not, an image would be fine too, I just wanted to know if there was any way to use a div as a background image for another element. Any and all help is greatly appreciated!
It might be possible to use an absolutely positioned div, with a fixed size, and a low z-index to place it behind the dt.
However, I'm sort of confused as to why you would do this and not just add a background image to the definition tag directly.
I want to developed a list, <ul><li></li>...<ul>, that shows every <li>element separately, and user must have to swipe from right to left to see next element.
Photoswipe do the that, but I need to show images with maps areas instead of <a href...><img ... /> </a>.
Do you know how can make a list where every list element is shown in one page, and user must have to swipe an element to see the next one?
You can use iScroll to do this. It makes it possible to scroll horizontally, as it is shown here. It also works with jQuery Mobile (here is an example for that).
Beyond this, you can take a look at iScroll's website and their code and examples at GitHub.