I have been looking for over 3 hours trying to figure this out so my apologies if you think this has been answered.
I am fully aware how to add a show/hide div to a page but I am struggling to add it to a category page in WP.
My site: http://www.ticketyoda.co.uk/6-nations-tickets
What I require is to be able to have a DIV under each category that can be shown when a button is selected. At present when I select a toggle it hides and then shows all divs on the page.
You're targeting all divs with the class "flip". You can remedy this by adding this to specify that you're only interested in the clicked-on element:
$(document).ready(function() {
$(".flip").click(function() {
var target= $(this).next(".panel");
$(target).toggle();
});
});
Have some more info.
See here..
http://www.ticketyoda.co.uk/professor-green
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("");
});
});
</script>
html
<style type="text/css">
div.panel {
margin-top:10px;
margin-left:0px;
margin-bottom:120px;
padding: 0px;
background: #fff;
border: solid 1px #fff;
}
p.flip {
margin-top:0px;
margin-left:540px;
margin-bottom:0px;
padding: 0px;
margin-top:-32px;
background: #fff;
border: solid 1px #fff;
}
div.panel {
widht: 50%;
height: 60px;
display: none;
}
</style>
<p class="flip"><img src="http://www.ticketyoda.co.uk/wp-content/uploads/2013/03/ticketview.png" /></p>
Related
I have 2 elements that each have different background colors and upon click, I'd like to make them change to a different color.
Here is code that works if the elements do not already have background-color:
html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
background-color: red;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="button_1" class="buttons">
<p>button_1</p>
</div>
<div id="button_2" class="buttons">
<p>button_2</p>
</div>
</div>
<script type="text/javascript">
$("#button_1").click(function() {
$('#button_1').toggleClass('selected');
});
$("#button_2").click(function() {
$('#button_2').toggleClass('selected');
});
</script>
</body>
</html>
However, if I give each id a background-color, they do not change color upon click:
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
#button_1 {
background-color: blue;
}
#button_2 {
background-color: green;
}
.selected {
background-color: red;
}
Also is there a way to write one function that turns each element red upon click? (Rather than write a function for each button. I will eventually have 8 buttons.) Thank you! Any help would be really appreciated!
First of all the .selected the class will apply each time but due to the selector priority it will be overwritten by .button. So there are tones of ways to fix it.
You can use !important keyword (not recommended at all)
.selected {
background-color: red !important;
}
NOTE: You should avoid as much as you can from using !important keyboard, but in your particular case this is the best way to do it, but I highly recommend changing your styling method and use the pseudo-class selector for your main classes instead. just like this:
.buttons:first-of-type {
background-color: blue;
}
.buttons:nth-of-type(2) {
background-color: green;
}
/* and so on */
And use a specific method for your selected class something like this:
.buttons.selected {
background-color: red;
}
Or
You can use a straight forward but repetitive approach. So make your .selected class selector something like this:
#button_1.selected, #button_2.selected /* and so on */ {
background-color: red;
}
Also for simplifying your js code you can do as follows:
$('.buttons').click(function () {
$(this).toggleClass("selected"); // $(this) keyword will refer to the clicked button, each time attribute with class buttons got clicked.
});
I think your problem is CSS Specificity.
The ID selector (#) will have a higher specificity than the class selector (.)
Try changing
.selected {
background-color: red;
}
to
#button_1.selected, #button_2.selected {
background-color: red;
}
If you want add ".selected" class for each button So you can try this one
I hope this will help you a lot.
$("button").each(function(){
$(this).on("click", function(){
$(this).toggleClass('.selected');
});
});
Just add background-color: red !important;
EDIT
you can use this like one function as requested.
$('.buttons').click(function(e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
$("#button_1").click(function() {
$('#button_1').toggleClass('selected');
});
$("#button_2").click(function() {
$('#button_2').toggleClass('selected');
});
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
#button_1 {
background-color: blue;
}
#button_2 {
background-color: green;
}
.selected {
background-color: red !important;
}
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px #999;
text-align: center;
color: black;
cursor: pointer;
}
background-color: red;
}
</style>
</head>
<body>
<div id="buttonGallery">
<div id="button_1" class="buttons">
<p>button_1</p>
</div>
<div id="button_2" class="buttons">
<p>button_2</p>
</div>
</div>
</body>
Here is the pure JS method.
You'll want to use querySelectorAll('.buttons').
const buttons = document.querySelectorAll('.buttons')
This will make a node list of all objects with the class .buttons.
Then you'll want to apply an event listener to each button by using forEach.
buttons.forEach(button=>{
button.addEventListener('click', ()=>{})
Then you can write a function for when a button is clicked.
const buttons = document.querySelectorAll('.buttons');
buttons.forEach(button=>{
button.addEventListener('click', ()=>{
button.classList.toggle('selected')
})
})
This will update automatically as you add elements with a class of buttons.
And then as others mentioned, add !important to the .selected class background-color property.
Let's consider there is a style sheet in an html page as shown below
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.
So the Style sheet in my html page should be updated like shown below:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
I can use jQuery css to add CSS rules as shown below
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)
I am developing a code editor which is why I face such a problem.
it took me a long time but finally here we go: DEMO
if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
and then after the function is called it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
The Function:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
Try this
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
This is assumed that you have only one <style> tag in page
You can apply hardcore css to perticular div...Like this
$('#main').css("background":"blue");
I am trying to make a div container expand and contract every time an even handler is clicked.
However, every time I load the page, I have to click the even handler twice to expand it for the first time, after that it works with one click but I would like to only click it once to get it to expand upon page reload.
CSS:
#bodywrap1{
border-radius: 5px;
height: 00px ;
width: 80% ;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
Javascript:
function expand(){
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
HTML:
<h2 onclick = "expand()" id = "expandv">Expand</h2>
Here is the site im working on, and the page specifically.
http://hourtimeagent.com/html/c++.php
Toggle works based on the display property, so set the display: none to the bodywrap1
When the first click happens, since the display is not set, instead of displaying the element toggle() hides it, to fix it set
#bodywrap1 {
border-radius: 5px;
height: 0;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
/*new property*/
display: none;
}
The reason it's taking two clicks is because the .toggle hides the #bodywrap1, and then on second click it shows the #bodywrap1 and animates the height.
I fixed this by using .toggleClass instead and changed some things around with the css
http://jsfiddle.net/PUCLM/1/
HTML
<h2 id="expandv">Expand</h2>
<div id="bodywrap1">
</div>
CSS
#bodywrap1{
border-radius: 5px;
height: 0px;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
background: blue;
}
#bodywrap1.theclass {
height: 600px;
}
jQuery UI (you can only animate height with jQuery UI, not plain jQuery)
$('#expandv').click(function() {
$("#bodywrap1").toggleClass('theclass', 500);
});
Your html is not correctly written, remove from <head> tags h1 and h2.
<head>
<link rel="stylesheet" type="text/css" href="../css/c++.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<h1>C++</h1>
<h2 id = "expandv">Expand</h2>
<h1>Variables</h1>
<!-- ... -->
Change your javascript for the following:
$(function() {
function expand() {
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
// Click function for #expandv item
$("#expandv").on("click", function() { expand(); });
// Initialize a hidden wrap
$("#bodywrap1").css("display", "none");
});
Working jsfiddle: http://jsfiddle.net/TFZ4R/
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}
I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}
When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}