I have a HTML/CSS page on the go right now where in the middle is an image map. On the left hand side I have an accordion menu in CSS. The idea is that when a user opens the accordion menu, when they change to the next page by clicking on a part of the image, the accordion will stay open to that spot. This is for training. So the instructions are on the left hand side and they can do it on the image map in the middle. Here's the CSS I have for the accordion:
Here is the stylesheet:
body {
background-color: #000000;
}
div.img {
float: right;
Border: 1px solid white;
}
.right {
margin: auto;
}
.accordion {
width: 350px;
box-shadow:
0px 0px 0px 1px rgba(12,12,12,0.3),
0px 2px 2px rgba(0,0,0,0.1);
Float: left;
Position: fixed;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: Relative;
display: block;
height: 30px;
cursor: pointer;
color: #FFFFFF;
line-height: 33px;
font-size: 19px;
background: #3333ff;
border: 1px solid #CCC;
}
.accordion name:hover {
background: #F3FF3F3;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: #ff2000;
color: #FFFFFF;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
display: none;
}
.accordion .content {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .content p {
font-family: "Arial";
color: #777;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .content {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .content.ac-medium {
height: 195px;
}
And here is the HTML:
<html>
<head>
<p style="color:white;float:top-left;font-family:Arial;font-size:25px;margin-bottom:0px;">Title</p>
<p style="color:white;float:top-left;font-family:Arial;font-size:15px;margin-top:0px;margin-bottom:0px;"> Subtitle</p>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<br>
<br>
<div class="container">
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Description</label>
<div class="content ac-medium">
</p>
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Description</label>
<div class="content ac-medium">
Description
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Category</label>
<div class="content ac-medium">
Description
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Category</label>
<div class="content ac-medium">
Description
</div>
</div>
</div>
</div>
</div>
</div>
<div class="img">
<div class="right">
<img src="CWS.png" width="1200" height="900" usemap="#CWS" />
</div>
</div>
<map name="CWS">
</map>
</html>
If this can be kept in CSS and HTML, that would be great as I'm not familiar with any other languages. Thank you in advance for your help!
EDIT:
So after scouring the internet I've found something that seems promising. I'm not a java guy but I figured I'd give this a shot:
// Initialize Stop Var
var stop = false;
// When the Drop Down is Clicked, Set Stop Var to True
$("#drop-down").click(function(event) { stop=true; });
// Prevent Accordion Close if Stop Var Set
$("#accordion").click(function(event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
I guess my question is, how can I implement the above java to work with my code. I'm not sure what values to change the "drop-down" and "accordion" to (if I even have to change accordion)
This will be stand alone, so there won't be any server side code.
Edit2:
Looks like I might not be allowed to use java.... is there a way to not have the menu refresh when changing screens?
You need some way to tell the page that something needs to be set/changed.
HTML: you create all pages the user can click and add the CSS needed to display the desired result. Fx. www.example.com/page1.html, page2.html ect. Then you set the display/hide specifically in the accordion.
Javascript: You set a cookie with the desired option/selection and then read that cookie on page load. This is not perfect as you may experience a flicker while page is being rendered.
Serverside: fx. using PHP you make your link like this: www.example.com/?accordion=1, ?accordion=2 ect. Then you check for this URL parameter and set's the CSS accordingly.
Looks like I'm going in a different direction with this project. Framesets are what I'll be using. Thanks everyone for your help!
Related
I have given an input element type checkbox, its fine but when its checked tick seems very big.
I need to make smaller that tick symbol
here is html content from browser:
<div class="defaultRoot">
<div class="defaultBody ">
<div class="checkboxWrapper">
<input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox" style="width: 24px; height: 24px; accent-color: rgb(47, 55, 93); border: 4px solid gray; border-radius: 0px; display: block; transition: border-color 0ms ease 0s, background-color 0ms ease 0s; cursor: default;">
</div>
<div class="labelWrapper">
<label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
</div>
</div>
</div>
How can I make that tick smaller and thinner
Currently the browser does not (and will not) support virtual elements to the tick of the checkbox you have to customize them yourself. refer here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
using CSS you can adjust the size of the tick inside the checkbox as follow
<!DOCTYPE html>
<html>
<head>
<title>Adjust Checkbox Tick Size</title>
<style>
.checkboxWrapper, .labelWrapper {
display: inline-block;
vertical-align: middle;
}
input[type=checkbox].kischeckbox {
display: inline-block;
width: 14px;
height: 14px;
accent-color: rgb(47, 55, 93);
border: 4px solid gray;
border-radius: 0px;
display: block;
transition: border-color 0ms ease 0s;
cursor: default;
vertical-align: middle;
}
input[type=checkbox].kischeckbox:checked + label::before {
content: "\2714"; /* tick symbol */
font-size: 16px; /* adjust the size of the tick here */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="defaultRoot">
<div class="defaultBody ">
<div class="checkboxWrapper">
<input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox">
</div>
<div class="labelWrapper">
<label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
</div>
</div>
</div>
</body>
</html>
I am having a hover issue. Whenever I hover over a specific .servNavItemTitle the font weight for the other .servNavItemTitle decreases for a moment and then goes back to normal quickly.
To see it in the demo, just hover over one of the titles and watch the other titles as the font-weight reduces.
Does anyone see what the issue is?
Here is a jsfiddle demo
Here is a narrowed down version of the code:
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;
transition: all 0.25s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
<div id="serviceNavBlock2" class="iblock">
<div class="servNavItemWrap">
<a href="http://localhost:8080/profile.php">
<img src="" alt="Aluminum Profile">
<span class="servNavItemTitle hGc block">Aluminum</span>
</a>
</div>
<div class="servNavItemWrap">
<a href="#">
<img src="" alt="Aluminum Components">
<span class="servNavItemTitle hGc block">Components</span>
</a>
</div>
After Temani narrowed down the issue, I searched and found the answer here: css transform element affects other element which use transform:scale(0.5) in android webview . Basically, I added -webkit-backface-visibility: hidden; to the scaled image and it works perfectly now.
I've been trying to create something similar to google images (when you click on an image it 'opens' a larger version with information and links and when you click again it closes).
My task (school) is to realise this with only pure html(5) and css(3), so no javascript or JQuery or any other programming language.
I already tried using checkboxes and radio. When I use checkboxes, it will expand an 'informationbox' which will not close when I open the next one. There only needs to be one open at a time.
Therefore I also tried using radio. The problem here is that I'm not able to deselect them.
Is it possible to realise this with only html and css?
Is there anyone who can help me?
Thanks in advance!
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<div class="content">
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle3"/>
</aside>
</div>
The best solution I found till now is to use radio. You need to use 1 extra input that has no content, so it will not show when you select it. This way the other ones will close.
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
</aside>
JSFiddle example:
https://jsfiddle.net/zv1pd6wn/
The only problem now is that the close button will be visible till the end of the animation, I already tried to solve it, but no luck, help is appreciated.
Is this you want. kindly try below code.
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
<div class="content">
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
</div>
--css---
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
#toggle3:checked + .content .fold
{
visibility: hidden;
}
Is it possible to change the tumblr default like/reblog buttons and insert an img? I'm trying to change my like button to http://38.media.tumblr.com/tumblr_m7wvvwuZdH1r17mw1.png
(excuse the link. I can't post images yet because of reputation/I'm a newbie.)
.
here is what my like/reblog button code looks like
<div id="buttons">
<div class="buttoned">{LikeButton size="14" color="black"}</div>
<div class="buttoned">{ReblogButton size="14" color="black"}</div>
and
/* BUTTONS */
#buttons {
width: 18px;
height: auto;
position:absolute;
margin: -5px 0 0 540px;
}
.buttoned {
width:14px;
height:14px;
padding: 2px;
margin: 0 auto 4px auto;
background-color: {color:buttons};
border: 1px solid {color:buttons};
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.buttoned img {
width: 14px;
height: 14px;
margin: auto;
text-align:center;
}
Here is the blog I am trying to change it on. http://kobisart.tumblr.com/
As you can see I'm trying on the like button. It allowed me to put the img but it won't let me use it as the like button
Thanks
A reblog button can be achieved with the undocumented {ReblogURL}.
<img src="img.png">
An alternate like button can be achieved via this previously answered question.
Complete newby question - I've looked everywhere (as I'm not a .NET dev finding it hard) to create a macro that pulls information from content items create into a list.
Here is the information I would like to present:
<style>
ul#showcase {
position: absolute;
left: 0px;
list-style: none;
margin: 0px;
padding: 0px;
text-align: right;
}
.showbox {
border: 2px solid #ffd83d;
border-color: #ffd83d;
border-radius: 2px;
background-color: #660000;
padding: 1em 2em;
width: 190px;
height: 152px;
margin-left: -110px;
box-shadow: 4px 4px 4px -1.5px rgba(62,99,125,.8);
}
.showbox a{
color: #ffd83d;
text-align: right;
}
.showbox:hover {
-moz-transition: margin-left,background-color;
-moz-transition-duration: 3s;
-webkit-transition: margin-left,background-color;
-webkit-transition-duration: 3s;
-o-transition: margin-left,background-color;
-o-transition-duration: 3s;
transition: margin-left,background-color;
transition-duration:3s;
margin-left: 0px;
background-color:#ffd83d;
}
.showbox:hover a {
position: relative;
-moz-transition: color;
-moz-transition-duration: 3s;
-webkit-transition: color;
-webkit-transition-duration: 3s;
transition: color;
transition-duration:3s;
color: #333333;
}
.showbox a:hover {
-moz-transition: color;
-moz-transition-duration: 1s;
-webkit-transition: color;
-webkit-transition-duration: 1s;
-o-transition: color;
-o-transition-duration: 1s;
transition: color;
transition-duration:1s;
color: #660000;
}
.showbox-inner {
position: relative;
border: 0px solid red;
border-radius: 4px;
background-color: #333333;
width: 110px;
height: 120px;
padding: 0px 90px 0px 10px;
margin: 0px 0px 0px 0px;
}
.showbox-inner:hover {
-moz-transition: margin-left,background-color;
-moz-transition-duration: 3s;
-webkit-transition: margin-left,background-color;
-webkit-transition-duration: 3s;
-o-transition-: margin-left,background-color;
-o-transition--duration: 3s;
transition: margin-left,background-color;
transition-duration:3s;
margin-left: 0px;
background-color:#333333;
}
.showbox-inner p {
float: left;
width: 75px;
margin-left: 5px;
padding: 5px 10px 5px 0px;
margin: 0px 15px 5px 0px;
text-align: left;
color: white;
}
.showbox-image img{
position: absolute;
margin: 5px -10px;
padding: 0px -10px;
}
.showbox-inner:hover p {
-moz-transition:color;
-moz-transition-duration: 3s;
-webkit-transition: color;
-webkit-transition-duration: 3s;
-o-transition-: color;
-o-transition--duration: 3s;
transition: color;
transition-duration:3s;
margin-left: 0px;
color:#ffd83d;
}
</style>
<div>
<ul id="showcase">
</li>
<li>
<div class="showbox">MooMooKwan
<div class="showbox-inner">
<p>Korean MooMooKwan Hapkido Association Australia</p>
<div class="showbox-image"><img src="../media/11698/MMK.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">H.I.A
<div class="showbox-inner">
<p>Hapkido International Association Australia</p>
<div class="showbox-image"><img src="../media/11692/HIA-Logo.png" width=110px height=110 /></img></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">Warrior Hapkido
<div class="showbox-inner">
<p>Warrior Hapkido GoldCoast, QLD</p>
<div class="showbox-image"><img src="../media/11710/warriorhapkido.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">Steve's Hapkido
<div class="showbox-inner">
<p>Steve's Hapkido Brisbane, QLD</p>
<div class="showbox-image"><img src="../media/11704/SHA-Bris.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
</ul>
</div>
I've included the style (even though this would be a seperate stylesheet) the issue i have is that every time i create a variable to display the items i want i just seem to make a complete mess of it.
The items i want to display are all "showcaseItem" document types i have created under a "showcaseFolder" off the root node.
The properties i want to display from each showcaseItem are:
dojangName - textstring
dojangUrl - textstring
dojangDescription - simple editor
dojangImage - Image Picker(from media)
Look - obviously i'm lost, ideally this is the "sort" of information i would like to present......
<li>
<div class="showbox">showcaseItem.dojangName
<div class="showbox-inner">
<p>showcaseItem.dojangDescription</p>
<div class="showbox-image"><img src="showcaseItem.dojangImage" width=110px height=110 /> </div>
</div>
Click to Visit
</div></li>
BUT i just don't know where to go from here so that i can:
List each child under the parent folder
Limit the list to 5 items that change at random (wish item)
Can anyone help?
Have a look at my dummy site http://propertymj.com (chrome or firefox only).
Something like this should work:
#{
// Get showcaseFolder:
var showcaseFolder = Library.NodeById(folderId);
// For debugging, output the name:
#showcaseFolder.Name
// Get five children at random:
var showcaseItems = showcaseFolder.Children.Random(5);
// For debugging, output the count:
#showcaseItems.Count()
// Iterate through items:
<ul>
#foreach (var item in showcaseItems)
{
<li>
<div class="showbox">#item.dojangName
<div class="showbox-inner">
<p>#item.dojangDescription</p>
<div class="showbox-image"><img src="#Library.MediaById(item.dojangImage).umbracoFile" width=110px height=110 /></div>
</div>
Click to Visit
</div>
</li>
}
</ul>
}
Have a look at this answer for some good resources on learning more about Umbraco's Razor syntax.