I'm trying to write vertically the text in which the animation is included. After numerous attempts, I was unable to determine where I was wrong, or what to change in this code. Attached I am sending an image showing the output of the code.
If anyone knows the solution, let them leave a comment, thanks.
Additional explanation:
I want to write the text vertically. I have shown this in the picture. The picture shows that one part is written vertically, while the text in which I built the animation via css code, unfortunately remains written horizontally.
Now I'm confused, what do I need to change in the CSS code in order to get that text, which has animation, written via csss code, to be written vertically as well.
.test2 {
writing-mode: vertical-rl;
}
body {background:transparent;}
.smrtn1kloading {
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
text-transform:uppercase;
width:150px;
text-align:center;
line-height:50px;
position:absolute;
left:0;right:0;top:50%;
margin:auto;
transform:translateY(-50%);
}
.smrtn1kloading span {
position:relative;
z-index:999;
color:#fff;
}
.smrtn1kloading:before {
content:'';
background:#1b8aca;
width:360px;
height:36px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
animation:2s smrtn1kloadingBefore infinite ease-in-out;
}
#keyframes smrtn1kloadingBefore {
0% {transform:translateX(-14px);}
50% {transform:translateX(14px);}
100% {transform:translateX(-14px);}
}
.smrtn1kloading:after {
content:'';
background:#242424;
width:14px;
height:60px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
opacity:.5;
animation:2s smrtn1kloadingAfter infinite ease-in-out;
}
#keyframes smrtn1kloadingAfter {
0% {transform:translateX(-50px);}
50% {transform:translateX(50px);}
100% {transform:translateX(-50px);}
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<table>
<tbody><tr><td><p class="test2">Preusmeri na <div class="smrtn1kloading">
<a href="https://ljubinko-stojanovic-smrtnik-privatna-baza-podataka.webnode.com/krajiske-lingvisticke-doskocice">
<span>Krajiške</span> <span>lingvističke</span> <span>doskočice.</span></a></div></p></td>
</tr></tbody></table>
Related
I am attempting to make a mobile navigation menu based off of this example: Basic Hamburger Menu
However, for what ever reason it does not work. When I click on the button nothing happens except rotating the 3-line graphic. The menu does not expand / appear.
When troubleshooting I have found out that if .mobile is site for display:block; instead of display:none; when the page loads, the javascript works for collapsing / hiding the menu, and making it reappear. Only the rotation of the 3-line graphic is opposite of what it should be. So, I know the javascript is working.
I just can't understand why it doesn't work with the nav hidden by default like in the example. I have played around with it for more then 3 hours so far and have gotten nowhere. There for I"m attempting to post it here to see if anyone might have any idea as to what might be going on as I am at a complete loss and about ready to wave the white flag.
This is the javascript on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('button').click(function () {
$(this).toggleClass('expanded').siblings('div').slideToggle();
});
//# sourceURL=pen.js
</script>
And the HTML / CSS is the same as the example except I have modified it so all the links are built into a UL.
HTML Code:
<div id="main_container">
<header>
<img src="<?php echo get_template_directory_uri(); ?>/assets/header3.jpg" alt"logo" width="100%">
</header>
<nav>
<div id="desktop_nav"><?php wp_nav_menu( $args ); ?></div>
</nav>
<nav>
<div id="mobile_nav" class="mobile">
<button>Toggle</button>
<div>
<?php wp_nav_menu( $args ); ?>
</div>
</div>
</nav>
And CSS Code:
#mobile_nav ul {
display: table;
width: 100%;
/*table-layout:fixed;*/
}
.mobile {
display:none;
position:relative;
width:100%;
min-height:50px;
}
.mobile div {
display:none;
}
.mobile button {
position:absolute;
top:10px;
left: 10px;
border:0;
text-indent:200%;
overflow:hidden;
background:#363636 url(assets/menu.png) center no-repeat;
border-radius:3px;
background-size:80%;
width:30px;
height:30px;
outline:none;
transition:all 400ms ease;
-webkit-transition:all 400ms ease;
transition:all 400ms ease;
}
.mobile button.expanded {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
border:0;
}
.mobile ul li a {
display: block;
background: #000;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #363636;
text-decoration: none;
color: white;
width: auto;
}
.mobile ul li:last-child {
border-bottom: none;
display: table-cell;
}
.mobile ul li a:hover,
.mobile ul li a:active,
.mobile ul li a:focus {
background: #363636;
width: 100%;
}
#media (max-width: 800px) {
.mobile {
display:block;
}
.mobile div {display:block}
#desktop_nav {
display:none;
}
}
Thanks
Adding a class to the div called "toggle" and changing the format of the javascript to the following solved the issue.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('button').click(function(){
jQuery(this).toggleClass('expanded');
jQuery(".toggle").slideToggle();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A common way to replace a standard input is display:none the input, and then add a background-image to the label.
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
background: url('../images/checkbox_unchecked.png') left center no-repeat;
background-size: 25px;
}
input[type="checkbox"]:checked+label {
background: url('../images/checkbox_checked.png') left center no-repeat;
background-size: 25px;
}
The problem: The HTML is broken afterwards. When i want to change the direction of the elements, I have to change it inside the CSS (background: right).
How can I change the image/style of an input field without make it display:none first, and then change the background image? It has to work in Android 2.3.
EDIT: JSFiddle.
The simple fix for your rtl issue (assuming that is the main problem here, based on your JSFiddle demo), is to also style on the dir attribute when set to "rtl":
.styles[dir="rtl"] input[type="radio"]+label {
background-position: right; /* Set the background position to the right. */
padding-left: 0; /* Reset the left padding on the label. */
padding-right: 35px; /* Give the label some right padding. */
}
JSFiddle demo.
Everything I've used above should work on Android 2.3 according to Can I Use....
You can some css that acts on the rtl attribute:
.styles[dir="rtl"] input[type="radio"]+label {
padding: 0 35px 0 0;
background-position: right center;
}
Here's your demo on jsfiddle: http://jsfiddle.net/ab0xwfcs/2/
I'm not sure about the support of this method, but you could also use the CSS :before instead of setting background positions for each direction.
.styles input[type="radio"] {
display: none;
}
.styles input[type="radio"]+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:red;
}
.styles input[type="radio"]:checked+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
}
Demo on jsfiddle
You can also use this method on the input itself, without setting it's display to none.
(This will create an extra element, that will hide the default one under.)
input[type="radio"]:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:gray;
}
input[type="radio"]:checked:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
position:relative;
}
I am new to front end development and I have to create with a special apparence.
I am french and I don't really know what am I looking for to create the shape I need.
So there is a part of the mock-up :
So I was wondering how to make the border of my div in diagonale?
I think about using canvas, or just simply put a div with a image-background corresponding. But what are the other options I have to do it? And in your opinion, what is the best?
Something like this perhaps?:
HTML:
<div id="header">LE BON REFLEXE</div>
CSS:
div#header
{
display:inline-block;
width:auto;
height:20px;
padding:5px 20px 5px 10px;
background:none #3476A9;
color:#fff;
font-weight:bold;
font-family:arial;
position:relative;
overflow:visible;
}
div#header:after
{
content:'';
display:block;
width:20px;
height:30px;
position:absolute;
top:0;
right:-5px;
background:none #3476A9;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
JSFiddle: http://jsfiddle.net/b4TGG/3/
You have a few option to create shapes.
The most known one is to draw borders with different colors.
Css3 offers today some transform possibilities,
pseudo-elements, shadows and borders mixed together can offer lots possibilities as well,
border-radius too.
position, display, float can be used to place element wherever you wish like any content.
Here something quiet similar to your screen : DEMO
Basicly from :
<div class="shapes">
<h1>Shapes ?</h1>
</div>
and some CSS
shapes {
margin:0 4em;
overflow:hidden;
position:relative;
}
.shapes:before {
content:'';
width:4em;
height:30em;
float:left;
background:gray;
transform:rotate(10deg);
transform-origin:top right;
position:relative;
z-index:1;
}
h1 {
border-top:1em solid #2C3744;
margin:0;
color:white;
background:#3476A9;
}
h1:after {
content:'';
padding:0.61em;
background:white;
position:absolute;
width:100%;
margin-left:1em;
margin-right:-100%;
transform:skew(-15deg);
}
and here plenty more ideas
So, I'm working on this JSFIDDLE (http://jsfiddle.net/dRpWv/248/) and I can't see why botcontainer div is bleeding into the footer. Other pages that I've created on the site don't have this problem.
I think it has to do with a recently JS coded div hide/reveal on the "vertical Expertise" tiles because I've checked all of the divs and made certain they're all closed. Also, tried display and position edits that had no effect.
Here's the basics of the CSS for content containers::
#topcontainer {
margin:75px 0 0 0;
}
#botcontainer {
margin:100px 0 0 0;
}
Here's the basic css for the "vertical expertise" area (which is wrapped in the botcontainer div)::
.vertTiles {
border: none;
margin-right: 3px;
margin-top:3px;
float:left;
}
.vertCont {
border: 1px solid black;
background-color: #ffffff;
display: none;
padding: 5px;
width:800px;
max-width:800px;
height:400px;
max-height:400px;
top:0;
left:0;
}
#xbox {
position:absolute;
width:75px;
height:75px;
bottom:20px;
right:20px;
}
Note that I've left out the MM_imageswap js just keep things clean in JSFIDDLE. ANy help from the community would be helpful!
Your code and CSS styles are Vast. It will take some time to go through it.
This is what i added. Is this what u want? Your question is a bit confusing.
CSS
#botcontainer {
margin:100px 0 0 0;
clear:both;
overflow:auto;
}
FIDDLE
phpFox has released a theme named "Nebula" with the version 3.5.0. On this theme, there is button on the Header and the menu slides down when the user clicks the button. (Actually not a button, but a div)
I want to add this feature to SocialEngine. But JavaScript Code contains a phpFox variable and I don't know what it refers to. I am not so good at JavaScript.
HTML:
<div id="nb_features">
Features
<div id="nb_features_holder">
Menu widget code will be added here...
</div>
</div>
JavaScript:
$Behavior.customNebula = function(){
$('#nb_features_link').click(function(){
if ($(this).hasClass('nb_is_clicked')) {
$(this).removeClass('nb_is_clicked');
$('#nb_features_holder').slideUp('fast');
} else {
$(this).addClass('nb_is_clicked');
$('#nb_features_holder').slideDown('fast');
}
return false;
});
};
CSS:
#nb_features {
position:absolute;
top:0px;
right:0px;
}
#nb_features_link,
#nb_features_link:hover {
display:block;
width:40px;
height:40px;
line-height:40px;
text-indent:-1000px;
overflow:hidden;
background:url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
margin-top:-7px;
margin-right:20px;
}
#nb_features_link:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features a.nb_is_clicked,
#nb_features a.nb_is_clicked:hover {
background:#334d83 url(~/application/modules/Wonder/externals/images/nb_features_link.png') no-repeat;
}
#nb_features_holder {
position:absolute;
background:#4f4f4f;
right:0px;
width:980px;
border:1px #304779 solid;
border-top:0px;
display:none;
margin-top:20px;
}
#nb_features_holder ul li a,
#nb_features_holder ul li a:hover {
float:left;
color:#fff;
height:30px;
line-height:30px;
padding:0px 10px 0px 10px;
text-decoration:none;
}
#nb_features_holder ul li a.menu_is_selected,
#nb_features_holder ul li a.menu_is_selected:hover {
background:#009AEF;
color:#fff;
}
#nb_features_holder ul li a:hover {
background:#2F2F2F;
-webkit-transition: all 0.50s ease;
-moz-transition: all 0.50s ease;
-o-transition: all 0.50s ease;
}
What should I do to make this code work with SocialEngine?
Well the $Behavior namespace is a wrapper for the onLoad event, is this the js variable you were talking about? If it is you can replace it for the more conventional jquery/mootools/etc way and it would probably work although you would have to match the selectors properly, dont know if the code you posted is everything you need