I need to call a fuction when .innerodds-view is clicked to display: block #prop-bet-view (this should be defoult display:none;) + change the css of innerodds-view::before.
<div class="prop-bet-click">
CLICK HERE TO VIEW PROP BETS
<div id="prop-bet-view">
<?php if( have_rows('prop-bet-view') ): ?>
<?php while ( have_rows('prop-bet-view') ) : the_row(); ?>
<ul class="prop-bet-block">
<li class="prop-bet-title">
<div class="prop-bet-text"><?php the_sub_field('prop_bet_text'); ?></div>
</li>
<li class="prop-odds">
<div class="prop-odds-title"><?php the_field('prop-odds-title'); ?></div>
<div class="prop-odds-nr"><?php the_sub_field('prop_odds_nr'); ?></div>
</li>
<li class="prop-bet-at-block">
<div class="prop-bet-at"> <?php the_field('prop_bet_at'); ?> </div>
<div class="prop-img"> <img src="<?php the_sub_field('prop_img'); ?>" alt="" style="max-width: 47px;" /> </div>
</li>
</ul>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
DEMO HERE
Set its CSS first:
#prop-bet-view
{
display:none;
}
and then the JS
$('.innerodds-view').on('click',function(){
$("#prop-bet-view").toggle();
});
if you want to add some animation you can do as below:
$("#prop-bet-view").toggle('slow');
The best way to make it work is:
// Hide it programmatically and remove that class.
$("#prop-bet-view").hide().removeClass("hidden");
// Toggle it using the event.
$('.innerodds-view').on('click',function(){
if (!$(this).hasClass("anim"))
$("#prop-bet-view").toggle();
});
// With some fade effect.
$('.innerodds-view').on('click',function(){
if ($(this).hasClass("anim"))
$("#prop-bet-view").fadeToggle();
});
* {font-family: 'Segoe UI';}
/* CSS to make it hidden. */
.hidden {display: none;}
/* Some good UI. */
#prop-bet-view {background: #ccf; text-shadow: 1px 1px 2px #666; border-radius: 5px; padding: 5px; text-align: center; margin: 5px 0;}
#prop-bet-view p {margin: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Trigger. -->
<button class="innerodds-view">Trigger</button> <button class="innerodds-view anim">Trigger Anim</button>
<!-- Add a CSS that doesn't make it display. -->
<div id="prop-bet-view" class="hidden">
<p>Hello!</p>
</div>
Related
The collapsible header on my website doesn't seem to be working, and I'm wondering if it's the way I have the HTML setup? I'm trying to get the header to collapse from 125px down to 75px on scroll, but something I can't seem to get it to work. I've seen the JavaScript I'm using work on other websites, so I'm not entirely clear on what is going on with this site. Does anyone see any issues with my code? It seems like it should work fine to me. Much appreciation!
<header id="masthead" class="site-header">
<section class="header-top" id="header-top">
<div class="container content">
<div class="top-search">
<?php get_search_form( ); ?>
</div>
<div class="site-branding">
<img class="logo" src="<?php echo get_template_directory_uri( ) . '/logo.svg'?>">
</div>
<div class="header-right">
<p class="contribute">Contribute</p>
</div>
</div>
<div class="container">
<div class="top-search">
</div>
<div class="site-branding">
</div>
<div class="header-right">
</div>
</div>
<div class="container header-top-block" id="titles" style="display:block">
<h3 class="header-block-heading-line" id="soup">
<a href="<?php echo home_url(); ?>" target="">
Hello
</a>
</h3>
</div>
</div>
</div>
</div>
</section> <!-- end header main -->
<section class="header-nav">
<div class="container borders">
</div>
</section>
</header><!-- #masthead -->
.header-top {
width: 100%;
z-index: 2;
position: relative;
background: $white;
position:fixed;
min-height: 125px;
&.collapsed {
min-height: 50px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 100) {
if(!document.getElementById("header-top").classList.contains('collapsed')){
document.documentElement.scrollTop += 100;
document.getElementById("header-top").className = "header-top collapsed";
}
} else {
if(document.getElementById("header-top").classList.contains('collapsed')){
document.getElementById("header-top").className = "header-top";
document.documentElement.scrollTop = 0;
}
}
}
Seems like you forgot to add } after &.collapsed declaration. Also If you are using plain CSS this code will not work (you are using SCSS syntax)
I am getting the records from the database and I have to display that records in accordion. I am able to displaying the records. Now what I am doing is, I have to display the first accordion open and when clicking on then close the previous accordion if open.
Currently, on page load all the accordion showing closed and when I click on accordion then it's not closing the previous accordion.
js
$('body').on('click', '.ac-title', function(e) {
$('.accordion-wrapper').find('.ac-content').stop().slideUp();
$(this).closest('.accordion-wrapper').find('.ac-content').stop().slideToggle();
});
php
while ($stmt->fetch()) { ?>
<div class="accordion-wrapper">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div>
</div>
<?php } ?>
css
.accordion-wrapper{max-width: 500px;width: 100%;margin: auto;text-align: left;border-bottom: 2px solid #fff;}
.ac-pane { margin-bottom: 15px; color:#000;border-bottom: 1px solid #fff;}
.ac-pane:last-child { margin-bottom: 0;border-bottom:none; }
.ac-content { display: none; }
.ac-title {color: #000;display: block;padding: 12px;background-color: #fc5c49;font-size: 20px;position: relative;}
.ac-title span{color: #fff;}
.ac-title img {float: right;font-size: 20px;width: 30px;}
.ac-title i:before {content: ""; background-image: url('../images/plus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute;right: 30px;top: 15px;}
.active .ac-title i:before {content: ""; background-image: url('../images/minus.png');
width: 20px;height: 20px;background-size: cover;background-repeat: no-repeat;background-position: center;position: absolute; right: 30px;top: 15px;}
.ac-content {margin-top: -1px;padding: 15px;font-size: 17px;}
#updatedQuestion: To display only the first row you could do like:
$count = 0;
while ($stmt->fetch()) {?>
<div class="accordion-wrapper <?php if(!$count) echo 'active'; ?>">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div></div>
And before closing the php tag at the end: $count++;
Hi bro after wrapping your while in ma div use this jQuery code
PHP
<div class="accordion-wrapper-main">
<?php while ($stmt->fetch()) { ?>
<div class="accordion-wrapper">
<div class="ac-pane">
<a href="javascript:void(0)" class="ac-title" data-accordion="true">
<span><?php echo $cat_name;?></span>
<i></i>
</a>
<div class="ac-content">
<!--contnet-->
</div>
</div>
</div>
<?php }
?>
</div>
JS
jQuery(".accordion-wrapper:nth-child(1) .other-hold").addClass("active");
HTML
<div class="dep-adm-inp" <?php if(!empty($adm_f) || $adm_f != "") echo "style='display:block'"; ?> id="fees-inp">
<label>Admission Fees(<i class="fa fa-inr"></i>)</label>
<div class="input-group">
<span class="input-group-addon remove-inp"><i class="fa fa-close"></i></span>
<input type="text" class="form-control expected" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Amount Expected">
<input type="text" class="form-control paid" value="<?php if(!empty($adm_f)) echo $adm_f; ?>" placeholder="Paid Amount">
</div>
</div>
Javascript
$(".dep-adm-inp").hide();
the div is hidden when page loads but if the php variable is not empty then i want to show the div when.
set the class variable dep-adm-inp as hidden by default in css. If the variable $adm_f is not empty, set style='display:block;'. With this logic you don't need to call the statement $(".dep-adm-inp").hide(); in your javascript. This way the div will be shown only if the variable $adm_f is not empty.
.hide() method sets display:none; on your element.
You can override it by setting display: block!important; (or whatever your display property is) in CSS:
setTimeout(() => {
$('.item').hide();
}, 2000);
.container {
display: flex;
}
.item {
width: 200px;
height: 100px;
background-color: darkgoldenrod;
margin: 10px;
}
/* This makes .item visible even after .hide() */
.item-visible {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item item-visible">Will be visible</div>
<div class="item">Will be hidden</div>
</div>
when I click on link and I want to add class not working
i want do (div modal )
code php/html
<?php if(isset($_GET['ido']) )
{
?>
<div id ="modal" class="modal" style="background: blue; width: 100%;
height: 180%">
<div class="modal2" >
</div>
</div>
<?php
}
?>
<div id="no" class="no" style="width: 100%;height: 300%;background: #000">
<div class="nolink" style="width: 50%;height: 50%;margin: 0 auto ; background: #fff">
<span>
link
</span>
</div>
</div>
code javascript
<script type="text/javascript">
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
};
</script>
when I click on link and I want to add class not working
i want do (div modal )
if you want to add new class on click, you should remove php condition and add 'return false' in onClick function
something like this: https://codepen.io/tuzov/pen/OQWJzB
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
return false;
};
.modal {
display:none;
}
.modal.new {
display:block;
}
<div id ="modal" class="modal" style="background: blue; width: 100%;
height: 180%">
<div class="modal2" >
123
</div>
</div>
<div id="no" class="no" style="width: 100%;height: 300%;background: #000">
<div class="nolink" style="width: 50%;height: 50%;margin: 0 auto ; background: #fff">
<span>
link
</span>
</div>
</div>
link
Your code is fine. The problem here is href in link (?ido=22). try to replace it with other options. and
<script type="text/javascript">
document.getElementById('link').onclick = function(){
document.getElementById('modal').classList.add('new') ;
};
if you use return false inside click function your link will not work. Be aware of that.
So this is probably a simple question. But I have to ask because it's not doing what I want.
Here is the button JavaScript:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
});
The button is shown if there is content in the div. But I would like it to hide again if the div has no content.
I tried:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
if ($(".saved-items").html().length < 0) {
$('.btn-01').hide();
}
});
Here is the HTML when an item is added:
<div class="col-sm-2">
<div class="saved-items"><h4>Items:</h4>
<ul>
<li><i class="fa fa-anchor" aria-hidden="true" style="color:#f60;margin-right:10px;"></i>RAW</li>
</ul>
<script>
$(document).ready(function(){
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
});
</script>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div style="display: block;" class="btn-01">Check Out</div></a>
</div>
</div>
And this is the HTML without any items saved:
<div class="col-sm-2">
<div class="saved-items">
<h4>Items:</h4>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div class="btn-01">Check Out</div></a>
</div>
But no go. Here is the CSS of btn-01:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px !important;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
display: none;
border:none;
}
You can use toggle() to achieve this:
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
Working example
length of string is zero or greater than zero..can't be less than zero.
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}else{
$('.btn-01').hide();
}
});
please check https://jsfiddle.net/Shilpi/uhfruo1a/2/