I want to modify my page's right sidebar to work like on www.novaator.ee's.
A bit of code i got from novaator.ee site:
/* accordation menu */
<script type="text/javascript">
function accordMenu(){
jQuery("#rightMenu .rContent").hide();
jQuery("#rightMenu .body-lehed").show();
jQuery('#rightMenu .rHeading').click(function() {
jQuery('#rightMenu .rContent').slideUp('normal');
jQuery(this).next().slideDown('normal');
});
}
</script>
and CSS
/* Accordation menu */
#rightMenu{
margin-bottom:11px;
width:214px;
}
#rightMenu .link{
font-weight:bold;
color:#6b6f72;
text-decoration:none;
margin-right:10px;
margin-left:14px;
font-style:italic;
font-size:11px;
padding-bottom:8px;
}
#rightMenu .link:hover{
text-decoration:underline;
}
#rightMenu .rHeading,.rHeading2{
background:#14588f;
color:#f6f6f6;
font-weight:bold;
font-size:15px;
padding:5px 20px 4px 20px;
cursor:pointer;
margin-bottom:2px;
height:18px;
}
#rightMenu .rHeading:hover,.rHeading2:hover{
text-decoration:underline;
color:#ffffff;
}
#rightMenu .cat-video2010,#rightMenu .cat-video2010 a,
#rightMenu .cat-video2011,#rightMenu .cat-video2011 a,
#rightMenu .cat-video,#rightMenu .cat-video a{
background:#ef9d37;
color:#f6f6f6;
text-decoration:none;
}
#rightMenu .rContent{
border:1px solid #dddddd;
border-top:0;
margin-top:-2px;
padding-left:6px;
padding-top:11px;
}
#rightMenu .question{
border-left: 5px solid #f6b439;
padding: 2px 5px 2px 9px;
line-height:16px;
}
#rightMenu .asnwerer{
font-size:13px;
font-weight:bold;
color:#c5c5c5;
padding-left:14px;
margin-top:4px;
margin-bottom:-5px;
}
#rightMenu .asnwer{
padding-left:14px;
line-height:16px;
}
My question is , where should i add these pieces of code (to style.css and to ... ) ?
What sort of other modifications might i have to do?
Keeping in mind that on my site the right sidebar is for modules(so the javascript should work for modules) and right now theres two woocommerce modules running.
I think i need to change the script a bit too , to function with fresh-lite theme.Since im no at home with javascript , i was hoping for someones further assistance.
What i've done so far , is that i've added css part of it to style.css and tryed to add script part to functions.php , but after done so , it will load blank pages(which ever URL i use).So i guess i have to use something like childtheme... ?
To be more accurate , i need all widgets(not modules) to work the same way.Accordions root should be the title of widget and it should work on click not on hover.
As it is, you need to include that script after the HTML it applies to. So look for a footer template or other location low in the page.
If you modified it slightly, like so, you can put it anywhere in the templates.
<script type="text/javascript">
jQuery(function() { // wait for the DOM to finish loading
function accordMenu(){
jQuery("#rightMenu .rContent").hide();
jQuery("#rightMenu .body-lehed").show();
jQuery('#rightMenu .rHeading').click(function() {
jQuery('#rightMenu .rContent').slideUp('normal');
jQuery(this).next().slideDown('normal');
});
}
});
</script>
All this assumes that the ID and class values that are in your CSS are also in place in your HTML.
Related
I want to change the color of the anchor tag and blur the image after visiting the link. but the only color is changing and the image looks the same.
this is my CSS code
<style>
.image123{
padding-left:80px;
}
.imgContainer{
float:left;
margin: 93px;
}
a:link{
color:#000;
text-decoration:none;
}
a:visited {
color:#fafafc ;
text-decoration:none;
opacity:0.2 ;
filter:alpha(opacity=60);
}
</style>
here is my HTML part
<a href="breakdown_assistance_ins.php" id="ba" name="ba" >
<img src="images/breakdwn_assiatance.png" style="height:100px; width:100px;"/>
<p>Breakdown </p>
</a>
Can anyone tell me the reason why I couldn't blur the image and help me to do the same?
add display:inline-block; to your a tag
.image123{
padding-left:80px;
}
.imgContainer{
float:left;
margin: 93px;
}
a:link{
color:#000;
text-decoration:none;
}
a:visited {
color:#fafafc ;
text-decoration:none;
opacity:0.2 ;
filter:alpha(opacity=60);
}
a{
display:inline-block; /* or block */
}
This should do the trick:
<style>
a:visited img {
-webkit-filter: blur(4px);
filter: blur(4px);
}
</style>
You can also read about filters here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
EDIT:
Went further in the exploration and as stated by #karthick nagarajan, browsers have stopped supporting anything else than the following properties (Source):
color
background-color
border-color (and border-color for separate sides)
outline color
column-rule-color
the color parts of fill and stroke
The previously given styles would work in any other situation than the :visited selector.
Also, as stated in this previous thread (How can I detect visited and unvisited links on a page?), it is not possible to retrieve the status of those links via Javascript, which make the given example impossible to fulfill given the current security specifications.
How to add content that already exists on another #div:before
because the existing div will I set as a fixed position
#text-1{
width:100%;
text-align:center;
/* visibility:hidden; */
/* position:fixed; */
}
#text-2 {
width:100%;
text-align:center;
}
#text-2:before {
content:"Equal to the contents of #text-1";
width:100%;
text-align:center;
color:#ff0000;
position:absolute;
width:100%;
left:50%;
background-color:#e3e3e3;
border-top:1px solid #999999;
margin-left:-50%;
margin-top:18px;
font-style:italic;
}
<div id="text-1">Content Text-1</div>
<div id="text-2">Content Text-2</div>
You need to use jquery for this. First include jquery library in your html file if it is not there and then add below javascript code inside your head tag:
<script type="text/javascript">
$(document).ready(function(){
var contents = $("#text-1").html();
$("#text-2").html(contents);
});
</script>
I have a problem with the tooltip which is not displaying on top of everything. I tried to change z-index to a really high number but that didn't work.
CSS:
a.tooltipA {
outline:none;
}
a.tooltipA strong {
line-height:30px;
}
a.tooltipA:hover {
text-decoration:none;
}
a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}
a.tooltipA:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
}
/*CSS3 extras*/
a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML:
html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';
You can check out this code: First tooltip is not fully visible.
JSFiddle
If possible I would like an answer using css/html but javascript is also an option. I can't use jquery. If you need more details, let me know. I also use bootstrap 3, but that doesn't matter I guess, since same thing happens on JSFiddle.
The problem with your fiddle is the margin-top:-30px in a.toolTipA span is moving the tooltip for the top link out of the viewport. You either need to start your items at least that far down the page, or remove that line from the css.
According to this previous stackoverflow post, setting position:fixed will keep your elements in the viewport.
Trying to change the background color of a box when it is flipped (it would be much easier to show you what I mean: (http://iam.colum.edu/students/jordan.max/demo/demo.php). I am new to jQuery and did a tutorial, and very easily able to de-engineer the code and figure out what to do to make it do what I want. I did this with relative ease up until I tried to change the color of the background when the element is flipped. It's very odd, because when I use 'inspect element' and i click the mouse thing over the object it says I set the background in "element" but that is non-existent in my CSS. Not trying to be confusing (this probably did sound confusing which is why I gave the link), hopefully someone knows what my issue is.
demo.php
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sponsor Flip Wall With jQuery & CSS | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Sponsor Flip Wall With jQuery & CSS</h1>
<h2>Go Back to Portfolio ยป</h2>
<?php
// Each sponsor is an element of the $sponsors array:
$sponsors = array(
array('github','The biggest social network in the world.','http://www.facebook.com/'),
array('twitter','The leading software developer targeted at web designers and developers.','http://www.adobe.com/')
);
// Randomizing the order of sponsors:
shuffle($sponsors);
?>
<nav id="main">
<figure class="sponsorListHolder">
<?php
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip" >
<p>'.$company[0].'</p>
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
'.$company[2].'
</div>
</div>
</div>
';
}
?>
<aside class="clear"></aside>
</figure>
</nav>
<footer>
<p class="note">None of these companies are actually sponsors of Tutorialzine.</p>
</footer>
</body>
</html>
script.js
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
styles.css
*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:lightgreen;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:400px;
height:400px;
float:left;
margin:4px;
padding: 30px;
background: #F66F89;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsor:active{
background: #F66F89;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background: #61D89F;
color:#0196e3;
font-family: 'Oregano', cursive;
font-size: 2em;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
/* Not being used right now
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
*/
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px white;
margin-bottom:30px;
background-color: #F66F89;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
color: lightgreen;
}
a img{
border:none;
}
If I'm not mistaken you can use "color" as a parameter
elem.flip({
direction:'lr',
speed: 350,
color: 'blue', //color
onBefore: function(){}
})
I am trying to change a list item when the user clicks the selected class is changed to the clicked item. I have this code:
$(function() {
$("a.product-page li").click(function(){
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
});
});
However the removeClass works however the addClass does not.
Here is the Site.
HTML:
<ul id="options">
<span></span><li>Summary</li>
<span></span><li>Specs</li>
<span></span><li>Media</li>
<span></span><li>Reviews</li>
</ul>
CSS:
ul#options {
margin-left:0px;
}
ul#options li{
list-style:none;
padding: 10px 20px;
background: #CCC;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
}
ul#options a{
display:block;
border:none !important;
}
ul#options a.selected-page span{
position:absolute;
width:0px;
height:0px;
border-width:10px;
border-color:transparent #999999 transparent transparent;
border-style:solid;
margin-left:270px;
margin-top:11px;
}
ul#options a:last-child li {
border-bottom:1px #999 solid;
}
It's because you're immediately removing the class. Flip those two lines around, and it'll work.
$(function() {
$("a.product-page li").click(function(){
$("#options a.selected-page").removeClass("selected-page");
$(this).parent("a").addClass("selected-page");
});
});
As noted in a comment above, your HTML is terribly malformed as well. That will need to be fixed.
You should wrap <a> link tag inside li tag like below,
HTML:
<ul id="options">
<li><span></span>Summary</li>
<li><span></span>Specs</li>
<li><span></span>Media</li>
<li><span></span>Reviews</li>
</ul>
You are removing the class that you just added. You can move the remove class above the addclass or just use not to exclude this when you remove..
Code:
$(function() {
$("a.product-page", $('#options')).click(function(){
$(this).addClass("selected-page");
$("#options a.selected-page").not(this).removeClass("selected-page");
});
});
You are adding the class and then removing in the next line.
The order here
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
is incorrect.
Reverse the lines
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");