Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a fiddle which I have replicated by seeing the screenshot below:
At this moment, I am able to replicate everything in fiddle from the design.
The snippets of CSS codes which I have used in order to align images in a straight line are:
.product-contents
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
Problem Statement:
In the fiddle, now if I click on any square images from the screenshot (Franchise Hub,Business Analytics, Tech Support, etc) apart from the Cloud Based & Mobile Image then A TV screen image(means a different image) should appear as present in the fiddle.
And if I click on Cloud Based and Mobile image then a phone image should appear (as shown in the current screenshot above)
I am not sure how to apply that logic. I am pretty sure I need to use Javascript but I am not sure how to use that.
Give your images unique id and hide all but one default details image. Then you attach event handler to each div that toggles image visible attribute based on id.
$('.sections').on('click', function(e) {
val section = e.target.id;
$('.sections').hide(); // hide all sections
$('#' + section).show(); // display only clicked one
});
Just a quick glance of what you can do. Set event listener that will listen for click on the mentioned images and then, inside of the passed callback function, change the css properties of another element using element.style.cssProperty such as display to change it from none to block.
const cbBtn = document.querySelector('div#cloud');
const container = document.querySelector('div.container');
cbBtn.addEventListener('click', event => {
container.style.display = 'block';
cbBtn.className = 'active';
});
div#cloud {
width: 100px;
height: 100px;
border-radius: 20px;
border: 1px solid black;
line-height: 100px;
text-align: center;
}
div#cloud:hover {
background-color: green;
color: white;
}
div.container {
width: 100%;
height: 200px;
background: #ccc;
display: none;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 200px;
}
.active {
background-color: green;
color: white;
}
<div id="cloud">
Cloud Based
</div>
<div class="container">
CONTAINER CONTENT
</div>
Related
I am currently working on a custom component that will allow you to pick different points which correspond to different values in time. Here is some sample code:
<div class="shell">
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
.shell {
background-color: #DCDCDC;
border-radius: 20px;
display: inline-flex;
}
.indicator {
background-color: #3CB371;
border-radius: 50%;
height: 15px;
margin: 2px 5px;
width: 15px;
}
.indicator:hover {
background-color: white;
}
var shell = document.querySelector('.shell');
shell.addEventListener('click', function(event) {
if (event.path && event.path[0].classList.value === 'indicator') {
console.log(event);
}
});
This looks like:
I was wondering if it would be possible to write some JS that would allow my mouse to sort of lock into each of these individual circles. Sort of like when you have the grid open in PhotoShop and your mouse will gravitate to the points and lock on.
Ideally, I'd be able to lock on to the center point of each individual circle.
Thanks!
I guess the word for that mouse movement is often referred as "snap".
To accomplish that with JavaScript, you would have to be able to manipulate the users mouse position. And as far as I know that is not possible.
Think about the Usability concerns this ability would bring. For example it could bring security issues as the visited page could direct your mouse to a malicious link when you try clicking somewhere else on the page.
I am attempting to design a very basic word processor. I want to have a "page" shown in the background (like you might see on Google Docs, or MS Word) that your text is written on.
How do I draw this page? Should it be an SVG? A stylized DIV? A big canvas? I am very new to designing using the DOM, so any help is appreciated.
Take a look at the contenteditable property here. This actually allows some elements content to be edited by the end user. For example, if I have
<div contenteditable="true">Hello!</div>
I can actually edit the text and change it as it fits my needs, right from the browser. This will come in handy when you try to implement features like bold or italic text, and a div element is also much easier to generally style than a huge textarea or input field.
As a notice, also don't forget about XSS.
You may be interested in the getting the page-like appearance at Google Docs. If so, then check out this really nice tutorial on building a collaborative text editor with Javascript. It's well written and introduces concepts gradually and even has a GitHub repo.
I streamlined the example into a single file HTML file that you can play with. This example also uses the contenteditable property mentioned in Armen's answer. By the way, the page-like effect is achieved via CSS which I've included within the HTML file using the <style> tag.
<html><head><style>
body { font-size: 14px; line-height: 20px; background: #e8e8e8; }
.ribbon { height: 200px; background: #3F51B5; }
.editor { width: 60%; padding: 40px 28px; min-height: 300px;
background: #fff; margin: 0 auto; position: relative;
top: -150px; font-size: 24px; }
</style>
<body>
<div class="ribbon"></div>
<div id="doc" class="editor" contenteditable="true"></div>
<script>document.getElementById('doc').focus();</script>
</head></body></html>
You can use a textarea element and set a specific height and width.
const bold = document.getElementById('bold');
const text = document.getElementById('text');
bold.addEventListener('click', () => {
if (text.style.fontWeight != 'bolder') {
text.style.fontWeight = 'bolder';
}
else {
text.style.fontWeight = 'normal';
}
});
textarea {
height: 500px;
width: 300px;
}
<button id="bold">bold</button>
<br>
<textarea id="text" placeholder="write text here!"></textarea>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.
Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)
HTML
<div class="top"><div class="title">Fade Away</div></div>
CSS
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
JS
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/
I hope that helps you get started!
To get the scroll position from top, you can use the document.pageYOffset property.
To fade something in, you have to use a setInterval, you can see it here:
How to do fade-in and fade-out with JavaScript and CSS
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.
http://codepen.io/anon/pen/xgask
SCSS
.container
width: 80%
margin: 0 auto
outline: 2px solid green
overflow: hidden /* Only used this here as a clearfix */
.text, .avatar
float: left
.text
width: 70%
outline: 1px solid red
.avatar
width: 25%
margin-left: 5%
outline: 1px solid blue
img
display: block
max-width: 100%
HTML
<div class="container">
<div class="text">
<p>Lots of text ...<p>
<p>Lots of text ...</p>
</div>
<div class="avatar">
<img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
</div>
</div>
On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.
However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.
With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.
I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?
With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.
Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.
In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.
If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.
http://codepen.io/anon/pen/nfvmj
This is mobile first.
Put the .avatar before the .text in the html:
.container {
margin: 0 auto;
width:90%;
outline: 2px solid green;
overflow: hidden;
/* Only used this here as a clearfix */
}
.text {
outline: 1px solid red
}
.avatar {
float: right;
width: 50%;
margin:0 0 2% 2%;
}
.avatar img {
max-width: 100%
}
#media (min-width:600px) {
.text {
width: 70%;
float: left;
}
.avatar {
float: right
}
.container {
width: 80%;
}
.avatar {
width: 25%;
margin: 0 0 0 5%;
}
}