I apologize first, my English is not very good, but I will try to describe my problem.
I'm implementing an RWD effect, and this is it!
When the screen is below 768px, I want to wrap an A tag around the demo block to make the whole block clickable, but when the screen resolution is above 768px, I want to add an A tag to cover the demo block.
I have tried using display:none in the initial a tag;
.demo{
background-color: #ccc;
padding:20px;
}
a{
text-decoration:none;
color:#222;
}
.link{
display: none;
}
#media(max-width:768px){
.link{
display: block;
}
}
<a class="link" href="#">
<div class="demo">
<h1><object>我是標題</object></h1>
<p>
<object>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab voluptatum v</object>
</p>
</div>
</a>
However, this will cause the whole picture to disappear at the beginning, which is not the effect I want. I would like to ask you how to write this better?
.demo{
background-color: #ccc;
padding:20px;
}
a{
text-decoration:none;
color:#222;
}
.link{
display: none;
}
#media(max-width:768px){
.link{
display: block;
}
}
<a class="link" href="#">
<div class="demo">
<h1><object>我是標題</object></h1>
<p>
<object>9999999999999999</object>
</p>
</div>
</a>
This is only a workaround
Do not use display: none;.
Instead write:
...
.link{
display: block;
cursor: default;
}
#media(max-width:768px){
.link{
cursor: pointer;
}
}
This will make the mouse cursor appear normal in desktop and appear clickable on mobile.
In reality you can still click, but 99+% of visitors will not realize or attempt to check.
See: https://developer.mozilla.org/de/docs/Web/CSS/cursor
Related
I'm not sure why my code is not responding, everything looks correct to me. I'm new to using jQuery and trying to use toggleClass to have card info displayed when the card on my page is clicked. Initially, I'd like it to be hidden but able to be toggled on and off.
$(document).ready(function() {
$('.card').click(function() {
$(this).toggleClass('inner-card.active');
});
});
.card {
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.inner-card .active {
display: none;
}
.inner-card {
display: flex;
flex-direction: column;
justify-content: end;
background: rgba(255, 165, 0, 0.5)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
It should go from this
To this
I believe there are several problems. First of all, I believe you want to write the display:none CSS logic this way:
.inner-card.active{
display: none;
}
This means that the inner card will be hidden if it also has the active class.
Secondly, I believe you need to rewrite the script this way:
$(document).ready( function(){
$('.card').click( function() {
$(this).find(".inner-card").toggleClass('active');
});
});
When you use the toggleClass you need to use just the name of the class, not the selector (-> no dot). Also, from the CSS, it looks like you need to find the inner card element first.
Fiddle link
You probably want something like this:
$(document).ready(function() {
$('.card').click(function() {
$(this).find(".inner-card").toggleClass('hidden');
});
});
.card {
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.hidden {
display: none !important;
}
.inner-card {
display: flex;
flex-direction: column;
justify-content: end;
background: rgba(255, 165, 0, 0.5)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="inner-card hidden">
<h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt, libero?</p>
Link goes here
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="magnify lens">
</div>
</div>
</div>
These are Two div's with one div having text and another one with only image in it.
When I Change even the slightest of the viewport the div image gets small and the div with text in it increases I want both the div to remain of same height without using media query and Flex is there any option using javascript??
<div class="book cf">
<div class="book-content">
<span class="title">world ocean summit 2017</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Delectus aspernatur similique, aperiam suscipit autem
doloribus quos accusantium,
</p>
<a href="#" target="_blank" title="Read More">
read more
</a>
<a href="#" target="_blank" title="Book Now">
book now
</a>
<div class="location">
<span class="icons">
<i class="fa fa-map-o" aria-hidden="true"></i>
</span>
<span class="text">
bali, indonesia
</span>
<span class="icons">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
<span class="text">
february 22nd-24th 2017
</span>
</div>
</div>
<div class="book-image">
<img src="http://via.placeholder.com/643x389" alt="Man" />
</div>
</div>
.book-content {
width: 50%;
float: left;
background-color: #5eabd7;
text-align: center;
}
.book-content .title {
padding-top: 60px;
display: block;
color: #fff;
font-weight: bold;
font-size: 25px;
text-transform: uppercase;
}
.book-content p {
padding: 7% 8%;
color: #fff;
font-size: 13px;
line-height: 22px;
}
.book-content a {
padding: 2% 6%;
display: inline-block;
color: #000;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
}
.book-content p+a { background-color: #ffffff; }
a[title^="Book"] { background-color: #ffe401; }
.book-image {
width: 50%;
float: right;
}
.book-image img { width: 100%; }
Define a css class to style the width, height, padding, borders and margins. Make sure this class will be good for the image. Apply the class to both divs. If need be, you can create another class without width, height etc. and apply such class to any of the div that may require it. Note it will be better if both divs are children of same parent (e.g. body).
Note however that if the text is associated with the image, then use the html picture tag. Wrap the text and image inside a p tag The p is a child of the picture. This is better for UX.
Browsers will always resize as the screen size changes. In this case, you will also need css to handle media screen size changes (responsive). e.g.
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
You can read more about this here: 'https://www.w3schools.com/html/html_images.asp'
Just find image height on page loading, then assign its result to the left div, then both divs looks with same height. Its a trick may be this help you. try this
Website in Question
What I want to happen is that when someone hovers one of the 3 buttons "Signature Events" "Weddings" "Le Coq d'Or" the background and content of the div above it change. The div above it is static, it's not a slider. Just a styled HTML block.
I've just started getting into JS within the last week or so, and this seems like it could be done with JS switch, but I'm not sure. I don't even know what to search to get info on this.
Thank you!
You can use a data attribute with the target class and a little bit jQuery Code.
$('button').hover(
function() {
$('header').addClass($(this).attr("data-class")).text($(this).attr("data-title"));
}, function() {
$('header').removeClass($(this).attr("data-class")).text($('header').attr("data-title"));
}
);
header{
background-image: url('http://lorempixel.com/200/600/');
background-size: cover;
height: 180px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
}
header.backgroundOne{
background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundTwo{
background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundThree{
background-image: url('http://lorempixel.com/200/600/');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header data-title="Header Image">
Header Image
</header>
<button data-class="backgroundOne" data-title="Title One">
Change Header 1
</button>
<button data-class="backgroundTwo" data-title="Title Two">
Change Header 2
</button>
<button data-class="backgroundThree" data-title="Title Three">
Change Header 3
</button>
So if you hover a button, the data-class attribute value from this button is added as a class to your header element. If you stop hovering, the class is removed again so that the default image is shown.
For such questions, I always feel the need to provide a css-only answer since I think nowadays far too much JavaScript (especially JQuery) is used to perform tasks which can be done with pure CSS. Mostly but not always CSS is more performant because it must not be executed and gets cached.
Please see the snippet below. It uses flexbox and the order css rule, which both have a fairly good browser support (unless you must support cripple browsers like older internet explorer versions).
.wrapper {
display: flex;
flex-flow: row wrap;
}
button {
flex: 0 0 auto;
height: 20px;
margin: 0 18px;
}
.wrapper > div {
display: none;
width: 100%;
height: 100px;
margin: 36px 0 18px 0;
order: -3; /* place the divs before the buttons */
}
#content-0 {
display: block;
background: cyan;
}
#content-1 {
background: hotpink;
}
#content-2 {
background: red;
}
#content-3 {
background: blue;
}
#btn-1:hover ~ #content-1,
#btn-2:hover ~ #content-2,
#btn-3:hover ~ #content-3 {
display: block;
}
#btn-1:hover ~ #content-0,
#btn-2:hover ~ #content-0,
#btn-3:hover ~ #content-0 {
display: none;
}
<div class="wrapper">
<button id="btn-1">Button 1</button>
<button id="btn-2">Button 2</button>
<button id="btn-3">Button 3</button>
<div id="content-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div id="content-1">
A wonderful serenity has taken possession of my entire soul, like
</div>
<div id="content-2">
One morning, when Gregor Samsa woke from troubled dreams, he
</div>
<div id="content-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A
</div>
</div>
(Clearly, the divs can be filled and styled as you like)
I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.
Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.
Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>
Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
The problem
I need to redesign CSS structure of an existing web application. It supports "branding" — it's got 5 different look-and-feels. Each user has one assigned brand, based on the company they work for.
Currently we have a bunch of complicated CSS files that have long since broken out of control. A typical web page includes 4 style sheets, templating system decides which ones. This means a page reload is needed to switch brands.
A new CSS system should:
Be based on CSS scripting, preferably LESS, or SaSS.
Use only one style sheet in the target environment.
Allow brands to be e̲a̲s̲i̲l̲y̲ switched without page reloading.
My idea
With the help of CSS scripting, define general and brand-based rules:
p {
/* general settings */
}
#brand1 p {
/* include/redefine general settings, add some for brand1 */
}
#brand2 p {
/* include/redefine general settings, add some for brand2 */
}
Create an outer <div> for the whole body and switch its id with JavaScript to brand1, brand2, etc. This way I don't need to script CSS in any way, just switch the "context" of all elements with one line of JavaScript.
I'm a CSS beginner, so I'd like to avoid going for something totally wrong. Please comment.
I do this way:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Themed Website</title>
</head>
<body>
<div class="wrap">
<div class="side">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div class="main">
<h1>Welcome</h1>
<h2>A Paragraph</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
</p>
<h2>A List</h2>
<ul>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</li>
<li>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}
Theming
Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.
Lets name the first class as .light and the CSS for the same would be:
.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}
JavaScript
And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, let's add these three links:
HTML
<div class="wrap themelinks">
<h4>Change Themes:</h4>
No Theme
Light
Grayscale
</div>
CSS
.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}
jQuery
$(document).ready(function(){
$(".theme").click(function(){
var theClass = $(this).attr("href");
$("body").removeAttr("class").addClass(theClass);
return false;
});
});
Demo
You can check out the working demo in jsBin.
Create a single, unbranded stylesheet, that defines the general layout of the page, then define brand-specific rules that vary depending on the class of the <body> element, for example:
/* Layout area */
#header {
height: 50px;
margin: 0.2em; }
etc...
/* Brand A rules */
.brandA #header {
background-image: url("brandALogo.png"); }
.brandA #footer {
background-color: purple; }
/* Brand B rules */
.brandB #header {
background-image: url("brandBLogo.png"); }
.brandB #footer {
background-color: orange; }
...so you don't need to redefine anything.
Then with a simple script client change the class attribute of <body> to "brandA" or "brandB" as appropriate.
I advise against using the id attribute because as the identity attribute it should be static and unchanging in the document.
I would do it this way for one element:
div {
/* general settings */
}
div.band1 {
/* include general settings, add some for brand1 */
/* redefine general settings, add some for brand1 */
font-weight: bold !important;
}
div.band2 {
/* ... */
}
for more elements (demo):
h1{
font-weight: bold;
color:green;
}
.band1 h1{
background-color:red;
color: white;
}
.band2 h1{
background-color:yellow;
}
.band1 .head2{
background-color:red;
}
.band2 .head2{
background-color:yellow;
}
.band1 #text{
background-color:red;
}
.band2 #text{
background-color:yellow;
}
Define layout independently, then define all the stuff that has same, let's say shape and overall UX... and then for the final touch use deeper selectors, like this:
Each brand's page's styling should have one more outer selector, for instance id that is connected to outer wrapper of the page, so for starting thing outer wrapper (or the body, altoho I do not recommend this) should be id="default"... default should have no reference in css whatsoever, then every other brand should be selected in css for body to have id="brand1" or "brand2" etc.
On Interaction whic changes the brand you just do this:
$(wrapper selector).attr('id', 'brandX');
What happends is - css rerenders the page accommodating other selectors that are deeper due added one more outer DOM container and thus more important then default ones.
Changing selectors this way gives you the ability to fine tune your page how ever you like, assuming that css3 and any DOM manipulation js engine is in your full expertise :D
you can also load the css dynamically (if you want to generate it based on some parameters, for example). do it with this line of code:
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
another advantage is that the user doesn't need to download all the style sheets of all the brands he doesn't want