Kendo Panel Bar Change collapse icon - javascript

Hi was trying hard to replace the kendo panel bar expand and collapse icon with bootstrap glyphicon-chevron-right. One way I can think is using javascript, literally replacing each and every state of icon. I have also noticed that kendo panelbar adds the following css to the span like:
k-icon k-i-arrow-s k-panelbar-expand -- when collapsed
k-icon k-i-arrow-n k-panelbar-collapse-- when expanded
I have tried doing this
#leftcontentnav .k-panelbar > li > span >.k-icon {
background-color: transparent;
opacity: 0.8;
border-color: transparent;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
background-repeat: no-repeat;
font-size: 0;
line-height: 0;
text-align: center;
background-image: url('../Images/download.jpg');
}
But I have downloaded a glyphicon and even that doesn't work properly.. is there any solution?

An important thing to realize about Glyphicons, is that they're font characters. If you want to use them to replace the icons purely with CSS it's a simple matter of hiding the existing icon, and inserting a Glyphicon in it's place.
First hide the Kendo icon image, and add the appropriate font:
.k-panelbar .k-icon {
background-image: none;
font-family: 'Glyphicons Halflings';
font-size: 1em;
overflow: visible;
}
Then insert the character you wish to use with the ::before selector:
.k-panelbar-expand::before {
content: "\e114"; /* glyphicon-chevron-down */
}
.k-panelbar-collapse::before {
content: "\e113"; /* glyphicon-chevron-up */
}

You can do with changing the position of the image on the glyphicon in your css
example:
.k-i-arrow-s { background-position: -96px 0; }
.k-i-arrow-n { background-position: -120px 0; }
You must calculate the position on your glyphicon image.

Related

How to make a div popup on a certain screen width

Hi I'm trying to build a div popup so when a users screen is below a certian (number px) it popups up saying this is recommended for a PC or tablet please help. I'm good at html, css, but i'm not good at JS/JavaScript.
Here is my DIV:
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
Here is my CSS for the DIV:
.alert {
padding: 10px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
border-radius: 5px;
}
.closebtn {
margin-left: 15px;
color: black;
font-weight: bold;
float: right;
line-height: 15px;
font-size: 20px;
cursor: pointer;
transition: 0.3s;
background-color: white;
border-radius: 20px;
height: 13px;
}
.closebtn:hover {
color: darkred;
}
Please don't dislike this page, But other than that please help me I'm very bad at JavaScript.
I tried looking up so many solutions but found none, but I know there is a solution and I'm expecting a code that gets the job done note again that I want a div not to show unless the screen size is below a certian px number. Thank you.
It's fairly straightforward using media queries. Some info on w3Schools here.
.alert {
display: none; /* at >600px width, don't display this */
/* set the css up below so when we do display it, it appears correctly */
position: fixed; /* position this fixed to the viewport */
inset: 0; /* and make it expand to the top, bottom, left and right edges */
background-color: rgba(255,255, 255, 0.9); /* apply a background to it to fade the contents out a bit using an opacity of 0.9 */
}
#media screen and (max-width: 600px) { /* apply this when the screen is less than or equal to 600 px wide */
.alert {
display: grid; /* use grid ... */
place-items: center; /* .. to put the message in the center of the screen */
}
}
<div class="alert">
<div class='alert-message'> <!-- added this to contain the message details so they appear together -->
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Recommended to be used on PC or tablet.
</div>
</div>
<main>
<h1>This is a title</h1>
<p>This is some text</p>
</main>

Underline blank rows area in handlebars

Using HandlebarsJS
I have a blank area with with dynamic content rendered. When text is not reaching min-height the content must contain empty underlined blank rows.
I tried using a background image in css like follows:
.regimul-juridic {
/*background-color: red;*/
margin-top: -5px;
min-height: 100px;
position: relative;
background-position: fixed;
line-height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAABlBMVEUAAAAAAASiCn3WAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjIAwaAACkAIHWnJmDAAAAAElFTkSuQmCC);
backdrop: static;
}
.regimul-juridic > p {
color: #000000;
font-weight: normal;
font-size: 9px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
but without success, because if there is more content on the area above the image will not expand properly. Does anyone have a solution ?
Picture showing what I am trying to achieve here:
For the underline you can use hr tags in the html

Button behind text only on mobile

I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}
You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute
The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}

Image rotate pagination question

trying to get the pagination inside the main area display to look a little better. Where it has the pagination, i would like the active states to be formatted to fit perfectly inside the appropriate boxes without the numbers showing but having some difficulties.
you can view the image rotate pagination issue here:
http://obliqueinteractive.com/demo/oblique/
Here is the code im working with for the pagination:
HTML
<div class="paging">
1
2
3
</div>
CSS
.paging {
position: absolute;
bottom: 10px;
left: 372px;
width: 189px;
height:41px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
background-image: url(../images/active.png) ;
width:12px;
height:11px;
}
.paging a:hover {
background-image: url(../images/active.png) ;
}
.paging a {
background-repeat:no-repeat;
background-position: x-offset
y-offset; }
change offsets in pixels to fit Your layout
and change content of to:
$nbsp;

CSS Navigation Menu Using Sprite: How to highlight current page's tab/button?

I've built a CSS navigation menu using a sprite, very similar to the one on Apple's website. I've got it working fine, such that it changes to the right position on the image on hover and mousedown (all using CSS), but I'm having a hard time figuring out how to make a button stay highlighted once it's clicked. I have a row in my sprite for the "clicked" look, but there's no CSS that I know of to handle something that's selected. I want the buttons to turn to their "clicked" version, depending on which one has been clicked. I've explored some javascript solutions, using jQuery, but I thought there might be a better way.
The sprite I'm using is very similar to Apple's, found here.
Any help would be greatly appreciated. Thanks.
More Info:
So my menu currently looks like this in html:
<ul id="global_nav">
<li id="home_nav"></li>
<li id="systems_nav"></li>
<li id="users_nav"></li>
<li id="utilities_nav"></li>
<li id="reference_nav"></li>
<li id="metrics_nav"></li>
<li id="help_nav"></li>
<li id="info_nav"></li>
</ul>
Any my CSS is all here (sorry, it's long):
#global_nav
{
background: url("../Images/nav_bar.png");
height: 38px;
width: 979px;
padding: 0;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
#global_nav li
{
float: left;
}
#global_nav a
{
height: 38px;
display: block;
}
#global_nav #home_nav
{
width: 118px;
}
#global_nav #home_nav a:hover
{
background: url("../Images/nav_bar.png") 0px -37px no-repeat;
}
#global_nav #home_nav a:active
{
background: url("../Images/nav_bar.png") 0px -74px no-repeat;
}
#global_nav #systems_nav
{
width: 116px;
}
#global_nav #systems_nav a:hover
{
background: url("../Images/nav_bar.png") -118px -37px no-repeat;
}
#global_nav #systems_nav a:active
{
background: url("../Images/nav_bar.png") -118px -74px no-repeat;
}
#global_nav #users_nav
{
width: 117px;
}
#global_nav #users_nav a:hover
{
background: url("../Images/nav_bar.png") -234px -37px no-repeat;
}
#global_nav #users_nav a:active
{
background: url("../Images/nav_bar.png") -234px -74px no-repeat;
}
#global_nav #utilities_nav
{
width: 117px;
}
#global_nav #utilities_nav a:hover
{
background: url("../Images/nav_bar.png") -351px -37px no-repeat;
}
#global_nav #utilities_nav a:active
{
background: url("../Images/nav_bar.png") -351px -74px no-repeat;
}
#global_nav #reference_nav
{
width: 117px;
}
#global_nav #reference_nav a:hover
{
background: url("../Images/nav_bar.png") -468px -37px no-repeat;
}
#global_nav #reference_nav a:active
{
background: url("../Images/nav_bar.png") -468px -74px no-repeat;
}
#global_nav #metrics_nav
{
width: 117px;
}
#global_nav #metrics_nav a:hover
{
background: url("../Images/nav_bar.png") -585px -37px no-repeat;
}
#global_nav #metrics_nav a:active
{
background: url("../Images/nav_bar.png") -585px -74px no-repeat;
}
#global_nav #help_nav
{
width: 117px;
}
#global_nav #help_nav a:hover
{
background: url("../Images/nav_bar.png") -702px -37px no-repeat;
}
#global_nav #help_nav a:active
{
background: url("../Images/nav_bar.png") -702px -74px no-repeat;
}
#global_nav #info_nav
{
width: 163px;
}
#global_nav #info_nav a:hover
{
background: url("../Images/nav_bar.png") -819px -37px no-repeat;
}
#global_nav #info_nav a:active
{
background: url("../Images/nav_bar.png") -819px -74px no-repeat;
}
CSS doesn't know or care what page it's on. You have to track that and output the relevant markup yourself.
Self-Answer:
To do this I essentially followed the way Apple does it on their site. I set a div with a width of the sprite, and added an unordered list within this div. Each list item represents a button along the button bar. Within each list item there is a single anchor tag that href's to the page that I want to go to when the button is clicked. In the CSS, I have a class that refers to all anchor tags under a list item under the containing div, under it's div, as such:
#globalheader #globalnav li a
{
float: left;
height: 0;
overflow: hidden;
padding-top: 36px;
width: 118px;
background-image: url("../Images/nav/nav_bar.png");
background-repeat: no-repeat;
}
This defines a background image for each of the anchor tags. Now I need to define the background position for each anchor tag, so it shows the right button. I have CSS for each anchor tag. Here's the CSS for one of them:
#globalheader #globalnav li#systems_nav a
{
background-position: -118px 0;
}
Of course I have CSS to handle the hover over the buttons (a:hover) and for the mousedown over the buttons (a:active), but my original question dealt with how to keep it on the selected look for the button when I'm on a certain page. I'll start with the CSS. If I had 6 buttons, I made six more CSS classes, each one pertaining to the container div having a certain class. That class the container has will be based on the page I'm currently on (I'll explain in a minute). Also within the definition of that CSS class, I specify which anchor tag to change the background position on. As an example, if I click the "Systems" button on the page, I will dynamically add (via javascript) a class to the container div of "systems", and this CSS will be applied as a result:
#globalheader.systems #globalnav li#systems_nav a
{
background-position: -118px -108px !important;
}
The background position is the one that covers the "clicked" look for my button. Note the .systems part of the declaration that specifies that the #globalheader div must have a class of "systems". If this is the case, it changes the background position of only a single anchor tag: you guessed it, the one right under the "systems_nav" li. I wrote one of these classes for each of the buttons in the button bar. The second trick was writing the javascript to handle dynamically adding the class to the div depending on what page I was on. To do this, I put a hidden div on each page that looked something like this:
<div id="page_section" title="systems" style="display: none;"></div>
It's not displayed, has a generic id that each of these divs will have on each page on my site, and has a title specific to the page I'm on. In my javascript file, I wrote this (it uses jquery):
var $globalheader = $('#globalheader'); // container div to add the class to
var $page_section = $('#page_section'); // div whose title is the current page
$globalheader.addClass($page_section.attr('title'));
Voila. "systems" gets added as the class name to the "globalheader" div, and the correct CSS class gets applied, making only the Systems button look clicked.
This took a little work by looking at Apple's website, but this is how they do it, and I trust them. It worked for me.
Hope it helps anyone else having the same problem I was.
Do you use a server-side programming/scripting language like PHP/ASP/JSP? If so, then you can just render a CSS class conditionally. Here's a PHP example (you can get requested page in PHP by one of the $_SERVER variables):
<a href="somepage"<?php echo ($currentpage == 'somepage' ? ' class="active"' : ''); ?>>somepage</a>
If you don't use a server side language, then the only resort is JS/jQuery. Do something like following during onload (you can get requested page in JS by parsing the window.location):
$('a[href="' + currentpage + '"]').addClass('active');
The CSS class a.active should obviously shift the background-position so that it becomes "active".

Categories