Develop Reference

How to change an a tag at a certain browser width

I've got this block of code that creates a drop-down sign in box:
<li id="login-link">SIGN IN
However, this is being appended to a hamburger menu when the mobile width media query is called, which isn't ideal. My questions is - is there a way to refactor this that changes this drop-down sign in box to simply an a tag () at the mobile width?
Thanks!

I would duplicate the <li id="login-link">...</li> element and create a class to display/hide them based on a media query. Something like this maybe:
#media only screen and (max-width: 599px) {
.mobile-only {
display: inherit;
}
.desktop-only {
display: none;
}
}
#media only screen and (min-width: 600px) {
.mobile-only {
display: none;
}
.desktop-only {
display: inherit;
}
}
<li id="login-link mobile-only">SIGN IN (MOBILE)
<li id="login-link desktop-only">SIGN IN (DESKTOP)
I would consider using Bootstrap for something like this as well.

Maybe it will help. On the same page, a view opens:
<div class="media-left pr-1">
<span class="avatar avatar-md"><img class="media-object rounded-circle" src="../../../app-assets/images/portrait/small/avatar-s-7.png" alt="Generic placeholder image"></span>
</div>
<div class="media-body w-100">
<h6 class="list-group-item-heading">Wayne Burton</h6>
<p class="list-group-item-text">to me <span>Today</span>
<span class="float-right">
<i class="la la-reply mr-1"></i>
<i class="la la-arrow-right mr-1"></i>
<i class="la la-ellipsis-v"></i>
</span>
</p>
</div>
</a>
</div>
<div id="collapse21" role="tabpanel" aria-labelledby="headingCollapse2" class="card-collapse collapse" aria-expanded="false" style="">
<div class="card-content">
<div class="email-app-text card-body">
<div class="email-app-message">
<p>Hi John,</p>
<p>Thanks for your feedback ! Here's a new layout for a new Modern Admin theme.</p>
<p>We will start the new application development soon once this will be completed, I will provide you more
details after this Saturday. Hope that will be fine for you.</p>
<p>Hope your like it, or feel free to comment, feedback or rebound !</p>
<p>Cheers~</p>
</div>
</div>
</div>
</div>

Effect on CSS and fancybox add-on

I will try to be brief, I made a design that when I passed the mouse through a box with an image, it was raised a bit using a css effect and I showed two buttons, one of them when I clicked open a video using the fancybox plugin 3.
When I close the video, the box remains with the effect pasted until I put the mouse back in the box, as shown in the image.
How can I make it so that once the video is closed, the image of the box returns to normal?
I make a copy of the code that I used in the style sheet and the fancybox code 3
javascript:
$(".imagen-evento").hover(function() {
$(this).find(".imagen").toggleClass("imagenHover");
$(this).find(".caption").toggleClass("captionHover");
});
$("[data-fancybox]").fancybox({
buttons : [
'close'
],
afterClose : function(instance, current) {
$(".imagen-evento").each(function(){
$(this).find(".imagen").removeClass('imagenHover');
$(this).find(".caption").removeClass('captionHover');
});
}
});
css:
.imagenHover {
-webkit-transform: translateY(-47px);
transform: translateY(-47px);
}
.captionHover {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
html:
<div class="card">
<div class="imagen-evento">
<div class="imagen">
<img class="card-img-top" src="/assets/images/p1.png" alt="Evento 1">
</div>
<div class="caption">
<div class="btn-group">
Más información
Ver video
</div>
</div>
</div>
<div class="card-body">
<div class="row detalles">
<div class="col-3 fecha">
<div class="dia text-center uppercase">17</div>
<div class="mes text-center">nov</div>
</div>
<div class="col-9 descripcion pl-0">
<div class="lugar uppercase"><i class="fa fa-map-marker" aria-hidden="true"></i> Chill Out</div>
<div class="personas-lista"><i class="fa fa-male" aria-hidden="true"></i> 180 personas en lista</div>
<div class="tiempo-lista time-list"><i class="fa fa-clock-o" aria-hidden="true"></i> Tiempo de lista: <div class="tiempo d-inline-flex" data-time="2018/01/15 02:21:40"></div></div>
</div>
</div>
</div>
</div>
With the option "afterClose" of fancybox 3 I try to remove the class that contains the effect in css but when I see the box, it does not have that class but the effect is still pasted as if it were active.
ok, better explain with an example ... in the following link click on the "watch video" button and when you close the video the image will be raised again and this should not happen.
https://jsfiddle.net/greermurray/9jt5Lzq3/1/

Sliding navigational menu (sliiide.js) works partially

I am trying to slide a navigational menu. I am using sliiide.min.js. The following settings work when I stay at the top of the page, but as I scrolls down and click to slide the menu it gives a blank white portion in the place of the actual menu, which I can't figure out how to sort out. If any of you experienced similar problems before, please kindly share. I am giving full code.
THE HTML MENU
<div id="tablet-mobile-menu" class="sidr left" style="visibility: hidden; display: block; left: 0px;">
<div class="utility-nav">
<div class="main-menu">
<ul id="burger-menu" class="links clearfix">
<li class="menu-15461 first">
Follow Us On
</li>
<div class="utility-menu">
<ul id="hamburger-utility-menu" class="links clearfix">
<li class="menu-7731 first">
Facebook
</li>
Pinterest
</li>
</ul>
</div>
<li class="menu-15461 first" style="">
Sections
</li>
</ul>
</div>
<p>Men's Health, The Brand Men Live By</p>
<p>Copyright © 2016 Rodale Inc. No reproduction, transmission or display is permitted without the written permissions of Rodale Inc.</p>
<p>
Privacy Policy.
About Us.
</p>
</div>
</div>
HERE IS THE JS CONFIGURATION:
<?php $this->script()->captureStart(); ?>
var settings = {
toggle: "#menu-btn-toggle", // the selector for the menu toggle, whatever clickable element you want to activate or deactivate the menu. A click listener will be added to this element.
exit_selector: ".is-active", // the selector for an exit button in the div if needed, when the exit element is clicked the menu will deactivate, suitable for an exit element inside the nav menu or the side bar
animation_duration: "0.1s", //how long it takes to slide the menu
place: "left", //where is the menu sliding from, possible options are (left | right | top | bottom)
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", //animation curve for the sliding animation
body_slide: true, //set it to true if you want to use the effect where the entire page slides and not just the div
no_scroll: true, //set to true if you want the scrolling disabled while the menu is active
};
$('#tablet-mobile-menu').sliiide(settings); //initialize sliiide
<?php $this->script()->captureEnd(); ?>
HERE IS THE HTML WHERE THE CLICK OR TOGGLE BUTTON RESIDES:
<div id="menu-btn">
<a href="/" title="Menu" id="menu-btn-toggle" class="clickable">
<!--<i class="fa fa-bars fa-2x" aria-hidden="true"></i>-->
<!--<i class="fa fa-times fa-2x" aria-hidden="true"></i>-->
<span></span>
</a>
</div>

Perhaps the slider is there its just that its sitting at the top of the page so what your seeing is the bottom of the menu.
have you tried to add a CSS style to the top of the navigation so its sticks to the top of page even when scrolling.
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

Abnormal width of columns

I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.
I have done the following:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>EVENTS</li>
<li>SPONSORS</li>
<li>DASHBOARD</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
EDIT DETAILS
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
With this little JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
Here's some relevant CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
What happens is this:
As you can see the text "fixed sidebar" is going behind the fixed div(#head-section). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.
What am I doing wrong and how should I solve it?
Here's the bootply: http://www.bootply.com/0xIGx67IzM

Ok so there are two way to resolve your problem
JQuery Solution
Change the width with outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS Solution
just replace width:100% width width:inherit in #head-section
#head-section {
width: inherit;
}
JQuery Example
CSS Example

You're setting your #head-section width equal to the width of the parent and then you're adding 100px of padding to it (50px to each side).
See this link for more info: http://quirksmode.org/css/user-interface/boxsizing.html
With standard positioning (position:static; or position:relative;) if you were to set your #head-section to {display:block;} (omitting the width:100%) that would automatically set it to fill 100% of the available horizontal space, and then your padding would push in instead of out.
In this case, however, because you're using position:fixed, your easiest solution would be to use your existing javascript and html (still removing the width:100% from your #head-section properties), but wrap the #head-section in another container element (perhaps an article for the sake of code legibility?)
From there you can update your javascript to:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
See fiddle: https://jsfiddle.net/znhws64p/1/

Manipulate css style of a class depending on other class css style

I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?

Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.

Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.

I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.