I have been reading through some guides and some posts on here but cant seem to put it all together for my situation, I haven't played with Jquery for such a long time ive forgotten how it all works.
I have an image .toggle-plus which when clicked should reveal the content within .hide and also change the image class to .toggle-minus.
My layout is like so
<div class="widget-header">
<h3 class="title">Header 1</h3>
<span class="toggle-plus"></span>
</div>
<address class="vcard hide">
<!--Content Here-->
</address>
<div class="widget-header">
<h3 class="title">Header 2</h3>
<span class="toggle-plus"></span>
</div>
<div class="share-items hide">
<!--content here -->
</div>
<div class="widget-header">
<h3 class="title">Header 3</h3>
<span class="toggle-plus"></span>
</div>
<ul class="opening-hours hide">
<!--content here -->
</ul>
CSS
.hide {
display:none
}
.toggle-plus {
background-image:url('/assets/toggle-open.png');
width:38px;
height:38px;
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
.toggle-minus {
background-image:url('/assets/toggle-close.png');
width:38px;
height:38px;
position: absolute;
right: 10px;
top: 12px;
cursor: pointer;
}
Could anyone help me on this one and explain the process, feel like im learning Jquery again
Thanks
Something similar to:
$('.widget-header').on('click', '.toggle-plus, .toggle-minus' function(e){
// you can toggle class names here
$(this).parents('.widget-header:eq(0)').next('.hide').slideToggle();
});
It would be a lot easier if you can combine your html so that there's more of a structural relationship between the hidden DIVs and the headers etc.
Related
I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>
I've looked everywhere on StackOverflow and there doesn't seem to be anyone else solving this issue or I'm just using the wrong wording or keywords which results in me not finding what I want. If that's the case and this is a duplicate, I would be glad if you could link me to a case like this. Thanks.
I have an HTML/CSS, AngularJS, PHP and MySQL project.
POST and GET requests work perfectly.
What I'm trying to do is similar to what is already done on Google Keep.
When the user clicks on the blue pencil, I want the opacity on the selected item to be 100% but all the parents divs and sibling divs at opacity value 0.3 or something.
I would like to try and avoid jQuery if possible.
I believe I read somewhere that it is bad practice to use a whole bunch of frameworks together and that when you use a framework, that you should stick with it.
I have no idea how to approach this problem.
I don't even know where to start.
Could you please also provide me with a working example JSFiddle or Plnkr please?
Any help or suggestion would be greatly appreciated!
Thanks in advance!
What I want
What I have
HTML
<body ng-app="myApp">
<font face="Source Sans Pro">
<div class="left">
<center>
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
</center>
</div>
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
</div>
</center>
</div>
</font>
</body>
EDIT
I just got it working.
New HTML
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div ng-controller="fadeController">
<div class="card" ng-class="cardFade">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div><!-- theText -->
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div><!-- deleteController -->
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div><!-- editController -->
</div><!-- card -->
</div><!-- fadeController -->
<br>
</span><!-- ng-repeat -->
<div class="overlay"></div>
</div><!-- fetchController -->
</center>
</div><!-- right -->
New CSS
.someCSS {
background-color: white;
z-index: 200;
opacity: 1;
}
.noCSS {
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
z-index: 100;
pointer-events: none; /* required to be able to click buttons under overlay */
}
fadeController.js
app.controller("fadeController", function($scope, $http, resultsService) {
$scope.cardFade = "noCSS";
$scope.editThisItem = function(item) {
if($scope.cardFade === "noCSS") {
$scope.cardFade = "someCSS";
}
else if($scope.cardFade === "someCSS") {
$scope.cardFade = "noCSS";
}
else {
alert("FATAL ERROR!");
}
};
});
you can add a div as overlay
<div class="overlay"></div>
.overlay {
backgound-color: gray;
opacity: 0.5;
z-index: 100; //<= so the overlay with cover the page
}
next you will need to add a css class like this
.someCss {
z-index: 101; // <=so it would be on top on the overlay
}
and it will be added to the ng-repeat element when you click on the blue pencil.
I would even go and make the class as ng-class ng-class
so it would be something like this:
<span ng-repeat="item in results">
<div class="card" ng-class="{someCss : item.selected}">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
and now on the blue pencil click you can add the property selected or change it
I've got rather a confusing situation in my layout. As I have attached below, the design shows text which a double lined and single lined. I set a margin to single lined texts so that it gets aligned. When there is a double lined text, I have to manually set the margin. Is it possible to set this without wrting a javascript function? could it be cone using pure CSS without having specific margins for each text type.
My div structure is as following.
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span>Ring</span>
</div>
Yes, rather simple too using line-height and height:
.operation .itemText{
line-height: 15px;
height: 30px; /* at least twice the line-height */
}
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x"></i>
<span class="itemText">Ring</span>
</div>
The trick is defining a space for the text to the height of two lines. The small worded items still take up two lines, but fill only one with text.
Alternatively, you could give the whole .operation a min-height, but I prefer not to, as mobile responsiveness gets trickier the more you define heights.
With CSS Flexbox you don't need any specific height, it will align anyway, using margin: auto 0, and it does not matter how many lines you have.
.wrapper {
display: flex;
}
.operation {
display: flex;
flex-direction: column;
}
.operation .itemText {
margin: auto 0;
}
/* styles added for this demo */
.wrapper { margin-bottom: 20px; }
.operation { padding: 10px; }
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>2 lines</span>
</div>
</div>
<div class="wrapper">
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring<br>3<br>lines</span>
</div>
<div class="operation text-center">
<i class="icon fw fw-ringing fw-3x">icon</i>
<span class="itemText">Ring</span>
</div>
</div>
Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!
Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)
I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.
I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?
HTML:
<div id="header">
Link to slide 1
Link to slide 2
Link to slide 3
<div>
<div class="section" id="section0">
<div class="slide" data-anchor="slide1">
<h1>Slide 1.js</h1>
This is slide 1
</div>
<div class="slide" data-anchor="slide2">
<h1>Slide 2</h1>
this is slide 2
</div>
<div class="slide" data-anchor="slide3">
<h1>Slide 3</h1>
</div>
</div>
Javascript:
$.fn.fullpage();
CSS
body{
color: #fff;
}
h1{
font-size:3em;
}
.section {
text-align: center;
}
#section0{
background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
Here's the jsfiddle
Thank you!
Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Then initialize it this way:
$('#fullpage').fullpage();
And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.
In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)
If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.
I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
<div class="wrap">
<nav class="nav">
<ul>
<li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
<li><a class="nav__item" href="#firstPage/slide2">2</a></li>
<li><a class="nav__item" href="#firstPage/slide3">3</a></li>
<li><a class="nav__item" href="#firstPage/slide4">4</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
<div class="slide" data-anchor="slide3"></div>
<div class="slide" data-anchor="slide4"></div>
</div>
</div>
Don´t forget to give the active class to the first anchor.
Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)
And for .js I just used what already comes along with the FullPage.js
$('#fullpage').fullpage({
anchors: ['firstPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
$('.nav__item.active').removeClass('active');
$('.nav__item').eq(slideIndex).addClass('active');
}
});
Now our navigation anchors have an active class depending on the current slide
though I´m not sure if the href targets are best practise yet it works.
Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.