I am at my last straw with this one. I cannot figure this out and it has been three days now of trying. I am using w3.css with jQuery UI and jQuery UI.css.
ISSUE: The progress bars appear but don't fill. When you remove the href to w3.css, the progress bars work just fine. But otherwise, the fill doesn't occur.
FIDDLE: http://jsfiddle.net/kjg95pxq/7/
HTML
<body class="w3-content" style="max-width:1300px">
<!-- ROW 3.1: Skillsets Section -->
<div class="w3-container">
<div class="progressbar w3-center" id="progressbar" data-value="50">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="w3-row" id="rowWaypoint2">
<div class="capsuleBox3 animated" id="capBox3">
<div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px">
<div style="padding-top:55px">
<h1>Skillsets</h1>
<p>My current skill progressions</p>
</div>
<!-- Progress Bar for JavaScript/jQuery -->
<div style="padding-top:18px">
<p> Tacos </p>
</div>
<div style="padding-top:0px">
<div class="progressbar w3-center" data-value="40">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="progressbar w3-center" id="progressbar" data-value="80">
<p style="position:absolute">20%</p>
</div>
<div class="progressbar w3-center" data-value="20">
<p style="position:absolute">20%</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
CSS
.progressbar {
width: 80%;
margin: 20px auto;
}
.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 2s;
}
JS
$(document).ready(function() {
pbRun();
function pbRun() {
$(".progressbar").progressbar();
//this initializes the widget
$(".progressbar").each(function() {
var valPB = parseInt($(this).data('value'));
var percentPB = valPB;
$(this).progressbar("option", "value", percentPB);
});
}
});
Try using:
.ui-progressbar .ui-progressbar-value {
box-sizing: content-box;
}
w3.css adds:
*, *:before, *:after {
box-sizing: inherit;
}
which messes with code.
JSfiddle
Related
I have the following code with a screen attached.
As you can see there are 3-col with the image and title but they are not aligned either their padding is the same.
The overall section is on the left side and has a lot of space from the right.
Any idea how to make them equal in height and width?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
<!-- vission -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
<h3 class="top25">Vision</h3>
</div>
</div>
<!-- objectives -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
<h3 class="top25">Objectives</h3>
</div>
</div>
<!-- mission -->
<div class="col-md-4 col-sm-4">
<div class=" whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
<h3 class="top25">Mission</h3>
</div>
</div>
</div>
I use bootstrap, but the red section showing the three icons has the following code which i think affected the entire row content not be organized.
section#block-counterboxstyle3 {
display: block;
box-sizing: border-box;
height: 300px;
background-color: #e00021;
clip-path: ellipse(550% 100% at 400% 100%);
margin-top: -200px;
}
Are you using bootstrap ?
When you set a class like col-4, you only set the width of each bloc, you need to set a max-heigth on css or in tag IMG using height.
Example:
Set the width of the wrapping div with id id="section-top-homepage to 100% of the page. You can confirm this by setting its border to 1px solid red. This worked for me.
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 want the (".aboutPage") to show and hide when (".about") is clicked. On start the div is showing. How do I incorporate the hide() with this as it is not hidden once the page loads. Please help. I am aware that the div has not been sized or anything, I'll do that after I get all three working.
.aboutPage {
height: 50px;
width: 50px;
background-color: red;
}
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
You have to use toggle method in order to display or hide the matched elements.
Also, you need to bind a click event handler to .about element.
To hide div when page loads: $('.aboutPage').hide();
or using css:
.aboutPage{
display:none;
}
$('.aboutPage').hide();
$('.about').click(function(){
$('.aboutPage').toggle();
});
.aboutPage{
height: 50px;
width: 50px;
background-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
</body>
You can use jQuery to toggle a class that hides the element.
$('.about').on('click',function() {
$('.aboutPage').toggleClass('hide');
})
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
And here's how you would do it in vanilla JS
document.getElementsByClassName('about')[0].addEventListener('click',function() {
document.getElementsByClassName('aboutPage')[0].classList.toggle('hide');
})
.hide {
display: none;
}
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
You certainly "can" use JQuery to do this, but it is not necessary.
See comments inline for explanation (Note: I've changed the last 3 h1 elements to p elements just so they will fit into the code snippet window here.):
// Get references to DOM objects needed to work the problem:
var a = document.querySelector(".about");
var ap = document.querySelector(".aboutPage");
// Add a "click" event handler to the .about element
a.addEventListener("click", function(){
// If .aboutPage is hidden, show it - otherwise hide it.
// Do this by adding or removing the .hide class.
if(ap.classList.contains("hide")){
ap.classList.remove("hide");
} else {
ap.classList.add("hide");
}
});
.aboutPage{
height: 50px;
width: 50px;
background-color: red;
}
.hide { display:none; }
<div class="container">
<h1 class="title">Name Goes Here</h1>
<div class="menu">
<p class="about">About Me</p>
<p class="projects">Projects</p>
<p>Contact Me</p>
</div>
<div class="aboutPage hide"> Here it Is</div>
</div>
Im having an issue while using media queries with "Swipe".
If i open my website in "tablet" mode, the swipe works in Mobile and Tablet forms, Desktop wont.
BUT, if i save my files again in the text editor and open them in Desktop mode, they work, but not in Mobile and Tablet.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
-ms-touch-action: none;/*pan-y on desktop*/
touch-action: none; /*pan-y on desktop*/
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-dois">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 2:</h2>
<img src="img/passodoisilu.svg" class="passoumilu">
<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-tres">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 3:</h2>
<img src="img/passotresilu.svg" class="passoumilu">
<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-quatro">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 4:</h2>
<img src="img/passoquatroilu.svg" class="passoumilu">
<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.mySwipe = Swipe(document.getElementById('slidepassos'));
</script>
I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.
Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).