JQM Adding a button to collapsible header - javascript

The following JSFiddle gives the basic source code:
http://jsfiddle.net/vgDwj/6/
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h3>Sample</h3>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<div data-role="collapsible">
<h3>Title 1</h3>
<p>Item 1</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</li>
</ul>
</div>
</div>
</body>
1)
What i want to do is along with the '+' sign to the left of each title, i want a button with 'X' sign (default JQM delete icon) on the extreme right also. But i am not able to add that 'X' sign. The 'X' sign will further be used to delete the item from the list.
2)
Underneath the 'Title 1' I have a <a> tag with the class as ui-btn ui-icon-delete.
Even then the delete icon is not appearin in this <a>.
Thanks

Regarding the second part of your question you need to enter it as follows,
The first part of your question can be achieved partially with css and completely with js.
First i suggest you get rid of the listview, as it does not render correctly containing collapsibles (noticed weird spacing at the sides of collapsibles when expanded). You can easily mimic the containers of a listview with few div elements and css.
If a button is added right after the declaration of each collapsible,
<div data-role="collapsible" class="my-collapsible">
No text
....
along with css that positions the delete button absolutely at the right of the header, then it is possible to achieve what you require partialy, since it only works when the collapsibles are expanded.
To make it work when the collapsibles are collapsed a little js is required.
A possible solution follows,
http://jsfiddle.net/7Xh9N/
html
-added div elements with class values container to mimic the white containers of listview. Note the first and last elements of your list have class value container first and container last respectively.
-added a No text to use along with css and make it absolutely positioned at the far right of the collapsible header.
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h3>Sample</h3>
</div>
<div data-role="content">
<!-- <ul data-role="listview" data-inset="true">
<li>-->
<div class="container-wrapper">
<div class="container first">
<div data-role="collapsible" class="my-collapsible">
No text
<h3>Title 1</h3>
<p>Item 1</p>
</div>
</div>
<!-- </li>-->
<div class="container">
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</div>
<!-- <li> -->
<div class="container last">
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</div>
<!-- </li>
</ul> -->
</div>
</div>
</div>
</body>
css
-added styles for container div elements
-added styles for my-delete button, to be absolutely positioned to the far right of the header
.my-delete{
position:absolute;
top:0;
right:2px;
display:block !important;
z-index:10000;
}
.container .ui-collapsible{
position:relative;
}
.container-wrapper{
box-shadow: 0 1px 3px rgba(0,0,0,.15);
border-radius:5px;
}
.container{
background-color:white;
padding:4px;
border:1px solid #ddd;
}
.container.first{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.container.last{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
js
-if the following code is run on pagecreate then the delete button will be also visible when the collapsibles are collapsed.
var $delButton = $('.my-delete').detach();
$('.my-collapsible').append($delButton);
http://jsfiddle.net/7Xh9N/1/

just add the class 'ui-btn-icon-left' to the element and you are good to go.
here is a working fiddle: http://jsfiddle.net/vgDwj/12/

Related

JS to add class to multiple elements that share class "project name" when hovered

I'm building a grid of portfolio items. I'd like to link the hover effect for items if they're from the same project.
Basically: on hover, if another element shares this class, trigger hover effect for that element also by adding class "faux-hover".
<div class="project red faux-hover"> HOVERED </div>
<div class="project blue"> </div>
<div class="project green"> </div>
<div class="project red faux-hover"> </div>
<div class="project red faux-hover"> </div>
<div class="project blue"> </div>
<div class="project green"> </div>
<div class="project blue"> </div>
You can write your hover effect in css and then add this function
function trigger(){
$('.project.red').hover(function (){$('.project.red').addClass('faux-hover')
},function (){$('.project.red').removeClass('faux-hover')})
}

Jquery css3 auto scroll image

Hi I have this piece of code that I would modify
<section id="imgTestata1" style="background-color:#f7f7f7; color:#ffffff; background-image:url(../asset/images/scatti/home1.jpg); padding-top:290px; padding-bottom:0px; background-position:Right top; background-size:cover;">
<div class="row-inner row-inner-full">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="colored-box wpb_animate_when_almost_visible wpb_bottom-to-top" style="max-width:550px; padding:35px 45px 50px; margin-left:40px;">
<img src="../asset/images/logo_trasparente.png" style="width:100%" />
</div>
<div class="vc_spacer" style="height:40px"></div>
<div class="sticky_navigation_wrapper">
<div class="sticky_navigation">
<div class="sn_inner">
<a href="#wrapper">
<div class="to_top"><i class="fa fa-caret-up"></i></div>
</a>
<ul>
<li>Innovazione</li>
<li>What's inside</li>
<li>Our Team</li>
<li>Features</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to add a javascript function that can allow me change the background image in the section named "imgTestata1"
Thanks
Not sure if you want to change the image or scroll it (probably the first)? Anyway:
Continuously scroll a div background image by animating its X position To scroll
http://www.jqueryscript.net/slideshow/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js.html To autochange it, demo here
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Auto-Background-Image-Switcher-easybg-js/

Rearrange content based on window size

I need to rearrange some content based on window/screen size.
This is how it looks when in full:
And this is what I need when screen size 768 or less:
This is my code structure:
<div class="container">
<div class="row">
<div class="col-md-9 site-main-content">
<div class="content">
<!--Main content-->
</div>
</div>
<div class="col-md-3 site-sidebar-content">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</div>
</div>
</div>
Not sure how to achieve this.
Update: I can not use hidden property. Box 1 contains some ajax search form. If I put it above main content (on full screen) and set display none, ajax form doesn't work anymore. So I am looking for a javascript snippet to remove box 1 from it's location and load it above main content when on smaller screen.
I have used hidden classes in my example please check and let me know...
Updated Fiddle
HTML
<div class="row">
<div class="col-md-9">
<div class="box-1 hidden-md hidden-lg">
Box 1
</div>
<div class="mainBox">
<div class="content">
Main Content
</div>
</div>
</div>
<div class="col-md-3">
<div class="box-1 hidden-xs hidden-sm">
Box 1
</div>
<div class="box-2">
Box 2
</div>
<div class="box-3">
Box 3
</div>
</div>
</div>
CSS
.mainBox{
background:green;
min-height:300px;
padding:10px;
margin-bottom:10px;
}
.box-1{
background:red;
min-height:100px;
padding:10px;
margin-bottom:10px;
}
.box-2, .box-3{
background:#00A2E8;
min-height:100px;
padding:10px;
margin-bottom:10px;
}

Display card list horizontally, HTML/CSS with Angular and MaterializeCSS

I want to display a list of custom cards using ng-repeat directive, but it keeps displaying vertically.
<style>
li{
display: inline
}
</style>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li ng-repeat="x in names">
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title" id="dani">{{x}}</span>
<p id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
What am I doing wrong?
UPDATE:
display: inline-flex;
fixes the problem, but puts the objects one after another on the same row. I want to go to a next row after lets say, 4 objects, so how can i set this up?
Update 2:
here's what i want to achieve:
so after 3 card displayed horizontally the line to increase :)
for li tag use floating to left
li {
float: left;
}
additionaly for ul add list-style-type:none;
The problem is that your repeat is on the line item. You are literally telling it that you want it vertically. Move your repeat to the span tag, you may also need to add display of inline-block and set a width on your span. Try this:
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br>
<span style="display:inline-block" id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</span></span>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Here is a Plunker. Let me know if this is not what you were trying to do.

Show Hide div with css only

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>
You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/
In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).
this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");

Categories