How to remove "css classes" when the "a href" is empty

How to remove "css classes" when the "a href" is empty - javascript

I've created a custom page template where i use WordPress posts to get images ( using feature images ) and I have made a gallery out of them.
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>
Now, what i want to achieve is to remove .middle class when the HREF is empty.
Tried a lot of i found on stack overflow but none of them was successful till now.
Thank you.

Considering that the_field("peoplelink") is empty:
<div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>">
<div class="pyete-vete">
PYETE VETE
</div>
</div>

You could try this:
<div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">

You could do something like this:
$('.middle').filter(function() {
return $("a", this).attr("href") == "";
}).removeClass("middle");
Demo
$('.middle').filter(function() {
return $("a", this).attr("href") == ""
}).removeClass("middle")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
</div>

You could do something like this (untested):
if ($(".middle .pyete-vete a").attr('href') != '') {
$(".middle").removeClass("middle");
}

Using the jQuery each function to loop through all a tags and check if href is empty.
$('a').each(function(e){
if($(this).attr('href')=='')
$(this).closest('.middle').remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<img class="img" src="<?php the_post_thumbnail_url(); ?>" style="width:100%"/>
<div class="middle">
<div class="pyete-vete">
PYETE VETE
</div>
</div>
<div class="middle">
<div class="pyete-vete">
PYETE
</div>
</div>
</div>

Related

Dynamically split div columns

code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping

You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>

How do I open next modal with data-url?

This is my First modal it have data URL and working well.
<div class="panel panel-primary panelgames" data-url="<php echo site_url(); ?>/games/play/memorymatch">
<div class="panel-heading">
<h3 class="panel-title">Memory Match</h3>
</div>
<div class="panel-body">
<img src="<?php echo site_url(); ?>/images/games/3.png" />
</div>
</div>
This is my second modal which I want to open after click on "click to begin next Game"
I want to open this modal
<div class="panel panel-primary <?php if(!$this->session->userdata('user_id') || $this->session->userdata()['is_paid'] != 1){ echo "panelgames-notActive";} else{ echo "panelgames"; } ?>" data-url="<?php echo site_url(); ?>/games/play/planes">
<div class="panel-heading" <?php if(!$this->session->userdata('user_id') || $this->session->userdata()['is_paid'] != 1){ ?> style="background: #b3b3b3;!important" <?php } ?>>
<h3 class="panel-title" style="color: #FFFFFF; font-size: 16px">Planes</h3>
</div>
<div class="panel-body">
<img class="img img-responsive" src="<?php echo site_url(); ?>/images/games/2.png" />
</div>
</div>
I want to open one by one after one game is completed all have data-url attribute please check and tell me. Thanks in advance.

you can open the modal manually by using this
.
$(document).ready(function(){
var show_btn=$('.show-modal');
var show_btn=$('.show-modal');
//$("#testmodal").modal('show');
show_btn.click(function(){
$(".panelgames").modal('show');
})
});

Get the id from a Img without the ID

i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
And this is my function in javascript:
function getID(e)
{
var x = e.src;
alert(x);
}
But it is not working, how do I get the id of each image if is being called from a database?

Why don't you get in the same way you wrote?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
function getID(id)
{
alert(id);
}

function getID(obj){
if(obj instanceof HTMLElement) {
alert(obj.getAttribute("data-target-id"));
}
else {
alert(obj);
}
}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 1</h3>
<p>Using data-* attribute</p>
<p>Button</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 2</h3>
<p>Passing id directly</p>
<p>Button</p>
</div>
</div>

you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
then this is script function
<script>
function getID(obj)
{
alert(obj.getAttribute("category-id"));
}
</script>
or add onclick function and send id in this function
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
this is script
<script>
function getID(id)
{
alert(id);
}
</script>
both will work.

Select an element inside div with multiple elements a same class onmouseover

I have installed Joomla 3 and Im trying select an element from multiple elements with the same class, but when I apply onmouseover event on the element, the function affect all elements with same class, I want the function affect to select element (onmouseover element)
function ocultarDatos() {
var itemk2 = document.querySelectorAll(".encabezado");
for (var i = 0; i < itemk2.length; i++) {
itemk2[i].style.display = "none";
}
}
<span class="catItemImage" onmouseover="ocultarDatos();">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="height:auto;" />
</a>
<a rel="author" href="<?php echo $this->item->author->link; ?>"><img class="globo" src="<?php echo $this->item->author->avatar; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($this->item->author->name); ?>" >
</a>
</span>
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

Try using var itemk2 = $(this).find(".encabezado");
instead of var itemk2 = document.querySelectorAll(".encabezado");
This should achieve the effect you are looking for

You need to pass event object in callback. and then you can use that event object to find current object and its child such as element with encabezadoclass in your case.
Try below code.
HTML
<span class="catItemImage" onmouseover="ocultarDatos(event);">
... ...
</span>
JS
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
Working Demo:
function ocultarDatos(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "none";
};
function ocultarDatosOther(event){
var encabezado = event.currentTarget.querySelectorAll('.encabezado');
encabezado[0].style.display = "";
};
<div onmouseover="ocultarDatos(event);" onmouseout="ocultarDatosOther(event);">
MouseOver on me.
<span class="encabezado">
and i will hide
</span>
</div>

<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
<div class="itemContainer itemContainerLast" style="width:12.5%;">
<div class="catItemView groupLeading">
<div class="encabezado">
<div class="catItemBody">
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</div>

I Have fixed it with CSS:
.encabezado { background: white; padding: 0px 15px; display:none; } .itemContainer:hover .encabezado { padding: 0px 15px; display:block; top: 150px; z-index: 100; }
With the effect i was searching for. Thanks for you attention.

Hiding div javascript

I currently have two divs on my page, one called results, one called portfolio on my site. I have some javascript that toggles between the two. Currently, the portfolio div loads, but I would like to switch the order. At first, this appeared to be very simple, I would just switch the
<div style="display:none">
to the results section, however this throws off my page. Here's all the html markup.
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<span id="two">
<header class="title one">Portfolio</header>
<div class="spacer"></div>
<div class="title two"><?php echo fuel_var('body', 'This is a default layout. To change this layout go to the fuel/application/views/_layouts/main.php file.'); ?></div>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="nav-featured">
<div class="prev-featured"></div>
<div class="next-featured"></div>
</div>
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper portfolio_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Clevelandmetroparks2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Polymerics.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Polymerics" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Polymerics</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Polymerics</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Raune.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Ru.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Ruane Attorneys</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Ruane Attorneys</div>
</a>
</div>
</div>
<!--
<div class="ca-item ca-item-4">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="img/screenshots/AW_results_connecticut.png">
<div class="f-image">
<img src="img/featured/feat-04.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
-->
<div class="ca-item ca-item-5">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>images/screenshots/AW_results_ clevMetroparks.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Clevelandmetroparks.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div>
</div>
</span>
<div style="display:none" id="one">
<header class="title one">Results</header>
<div class="spacer"></div><br><br>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper results_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single_two">
<a href="https://vimeo.com/84619379" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/cle2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single_two">
<a href="http://vimeo.com/84619331" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/Screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/ardl2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
</article>

if you're familiar with jQuery, there's a much easier way to do it.
$('#divName').hide();
$('#divName').show();
Put those inside your toggle/swap function.
P.S.: You prepend it with a '#' if you are using id (i.e.: div id="divName"), if you are using class you prepend it with a '.' You can also use $('#divName').css('display', 'none') and $('#divName').css('display', 'block').

The following JavaScript should work:
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<div id="first" style="display:none"><p>One</p></div>
<div id="second"><p>Two</p></div>
<button onclick="swap('first','second')">Swap</button>

I found a solution: I figured something was coming up when it displayed it as a block, so I changed my javascript to this:
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.height = '100%';
document.getElementById(one).style.width = '100%';
document.getElementById(two).style.height = '0';
document.getElementById(two).style.width = '0';
}
</script>
Hope this helps anyone else.

Develop Reference

JavaScript is the programming language of the Web.

How to remove "css classes" when the "a href" is empty - javascript

Considering that the_field("peoplelink") is empty: <div class="<?php echo empty(the_field("peoplelink")) ? 'middle' : ''; ?>"> <div class="pyete-vete"> PYETE VETE </div> </div>

You could try this: <div class="<?php if (the_field("peoplelink")){ echo 'middle'; } ?>">

You could do something like this (untested): if ($(".middle .pyete-vete a").attr('href') != '') { $(".middle").removeClass("middle"); }

Related

Dynamically split div columns

How do I open next modal with data-url?

Get the id from a Img without the ID

Select an element inside div with multiple elements a same class onmouseover

Hiding div javascript

Categories

Resources