I am new to HTML and CSS, but I have an idea on JavaScript.
Previously, I made a horizontal switch in the following way using flat-ui from flat-ui
Now I want to implement vertical switch in the following way
How can I make it?
something like this?
<ul class="body">
<li >
<a>switch #1</a>
</li>
<li class="active">
<a>switch #2</a>
</li>
</ul>
See the css and animation in link
jsfiddle.net/uNFWX/
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I have some questions about jQuery animations.
But first, This is what I have currently. http://jsfiddle.net/ssmm0714/00vkoopn/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
I would like the green div to slide with bouncing effect (like easeOutBounce) and push the yellow div out until only the green div's arrow is shown, and the contents of the green div will appear.
(It's like a sliding card effect?)
Currently, I made it so that the arrow spins on click.
Could someone help me with coming up with the desired effect? I tried doing a slide on both, but I do not know how to stop it when the blue div hits the arrow.
Also, as a side question, is it a good practice to put all widths of each divs in percentage form? I did this because this is going to be a mobile web app, and wanted to make it responsive.
Anyways, for reference,
This is the mock up of what I want it to look like after.
http://jsfiddle.net/ssmm0714/9q04nz0d/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
<span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
To add the bouncing effect you will need the jquery-ui lib.
Next thing - you want both the yellow div and the green div to have the same effect (for the hide and show) and the effect should work the same time.
$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');
Check out this fiddle: http://jsfiddle.net/w84btwsf/1/
Note that I added some workaround to handle small screens and problems with percentages (you can see it in the top of the js part).
Regarding your question about percentages - yes, this is indeed a good practice. You can also use one the the many css-frameworks that helps with developing responsive layouts (bootstrap is one of them).
I have used "enscroll" js scroll bar in my page. http://enscrollplugin.com/#demos
<div id="enscroll_name">
<ul>
<li id="p1">product1</li>
<li id="p2">product2</li>
<li id="p3">product3</li>
<li id="p4">product4</li>
<li id="p5">product5</li>
</ul>
</div>
On Page load the product3 need to be in the visible area. I used <a name="p3"></a> for this. But in query how to achieve this? In html we used anchor name tag like <a name="p3"></a>. But in this script how to achieve this?
You can use .scrollTop() jquery function to visible whatever the area that you want inside the div.
Try like this..
$('#yourdiv').scrollTop($("p[name='p2']").height());
Check the sample fiddle
I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>
I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app.
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons.
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. How would I achieve this? My code is...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated.
EDIT: I've found an example of something similar. Here it is...link. Click a thumbnail and it shows on the iPhone.
I'd probably set it up as follows:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
$('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
<script>
$('.screenshots a').click(function(){
switch($(this).attr('id')){
case 'src1':
$('.iphone').css('background-image','url("image1.png")');
break;
case 'src2':
$('.iphone').css('background-image','url("image2.png")');
break;
}
});
</script>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li>Screen 1</li>
<li>Screen 2</li>
</ul>
It's more appropriate to use actual links instead of adding a click event to an li. Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot.
With that in place, the following jQuery should work:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch event handler, instead of click.
I'd suggest a single jQuery click handler that can set the desired image background for each one:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
$('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>