In a WordPress website, I want to configure a set of css buttons appear in a block. So that each post have a set of buttons. I was able to set them in inline-block. But the issue is that when I wrap them with a new class(via jquery) in order to center using display:block, the buttons belonging to other posts also appear in the recent posts.
Say, the recent post named - "mypost10" has the five buttons, other post buttons appear besides the five buttons if I wrap with main-class-wrap.
Here is the jquery to wrap and add classes:
jQuery(document).ready(function () {
jQuery(".sub").wrapAll("<span class='main-class-wrap' />");
jQuery(".sub-1").find('a').addClass('sub-sub-1 icon-magnifier');
jQuery(".sub-2").find('a').addClass('sub-sub-2 icon-tools');
jQuery(".sub-3").find('a').addClass('sub-sub-3 icon-shareable');
jQuery(".sub-4").find('a').addClass('sub-sub-4 icon-magnifier');
jQuery(".sub-5").find('a').addClass('sub-sub-5 icon-magnifier');
});
Here is the output code:
<span class="main-class-wrap">
<span class="sub sub-1">
<a href="http://link1.com" target="_blank" class="sub123 icon-one">
Link1
</a>
</span>
<span class="sub sub-2">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link2
</a>
</span> <span class="sub sub-3">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link3
</a>
</span>
<span class="sub sub-4">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Link4
</a>
</span>
<span class="sub sub-5">
<a href="http://link2.com" target="_blank" class="sub123 icon-two">
Lin5
</a>
</span>
<span class="sub sub-1">
</span>
<span class="sub sub-2">
</span>
<span class="sub sub-3">
</span>
<span class="sub sub-4">
</span>
<span class="sub sub-5">
</span>
</span>
I put them all in a fiddle
Could any one tell me if I am doing anything wrong with the code?
Related
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.
The loader is not enabled in my bxslider, how to enable it
bx slider version 1.4
JavaScript code
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
pause: 5000,
speed: 2000,
autoStart:false,
preloadImages:'all',
});
});
In Html the list element contain inner elements
<div class="baner-slider">
<ul class="bxslider">
<li>
<span class="baner baner-1 ">
<span class="bg-shadow">
<span class="h1">g</span>
<span class="h4">We es</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-2 ">
<span class="bg-shadow">
<span class="h1">Nd</span>
<span class="h4">edefefe</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-3">
<span class="bg-shadow">
<span class="h1">ry</span>
<span class="h4">Ags .</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-4">
<span class="bg-shadow">
<span class="h1">A</span>
<span class="h4">A Academia.</span>
learn more
</span>
</span>
</li>
</ul>
<div class="arrow" id="arrw">
<img src="img/icons/arrw.png" alt="">
</div>
<div class="event-wrap hidden-xs hidden-sm">
<h4>Visit us at booth #507 at PAG 2017</h4>
</div>
The issue is solved when i added img tag inside li
Thanks to zer00ne for help
I'm using the plugin called Ascensor from http://kirkas.ch/ascensor
It's basically a tool that help me build a single page application.
However, I have a problem that I don't know how to solve.
All of my content will be listet inside my <div id="ascensorBuilding">
<div id="ascensorBuilding">
<div class="floor floor-1">
<span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
<span class="text">Floor 2</span>
</div>
<div class="floor floor-3">
<span class="text">Floor 3</span>
</div>
<div class="floor floor-4">
<span class="text">Floor 4</span>
</div>
<div class="floor floor-5">
<span class="text">Floor 5</span>
</div>
<div class="floor floor-6">
<span class="text">Floor 6</span>
</div>
<div class="floor floor-7">
<span class="text">Floor 7</span>
</div>
</div>
And my floor links:
<nav>
<ul class="links-to-floor">
<li><a>Floor 1</a></li>
<li><a>Floor 2</a></li>
<li><a>Floor 3</a></li>
<li><a>Floor 4</a></li>
<li><a>Floor 5</a></li>
<li><a>Floor 6</a></li>
<li><a>Floor 7</a></li>
</ul>
</nav>
And I then use this script to change between the "pages"
var ascensor = $('#ascensorBuilding').ascensor({ascensorFloorName:["Home", "About", "HTML" , "Jquery" , "CSS", "Smartphone", "End"], direction: [[0,0],[0,1],[0,2],[1,0],[1,1],[1,2],[2,0]]});
var ascensorInstance = $('#ascensorBuilding').data('ascensor');
$(".links-to-floor li").click(function(event, index) {
ascensorInstance.scrollToFloor($(this).index());
});
$(".links-to-floor li:eq("+ ascensor.data("current-floor") +")").addClass("selected");
ascensor.on("scrollStart", function(event, floor){
$(".links-to-floor li").removeClass("selected");
$(".links-to-floor li:eq("+floor.to+")").addClass("selected");
});
As you can see I add a floorname to my url. So I will start on www.mysite.com/index.html#home and if I go to another page, it would be www.mysite.com/index.html#about for example.
And if I manually put www.mysite.com/index.html#about in the addressbar, I will also go to that specific page.
But my problem is that if I click around my floors, non of the pages are added to the browsers history. So if I decide to click on the browsers back button, I will go back the site I was on before entering my website.
How can I manage to add my click to the browsers history?
You can manipulate the Javascript history object yourself:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
If I have a list:
<div class="item active ui-sortable">
<li class="player ui-droppable" data-name="Kev" data-pick-id="534dd2424b65762a89020000">
Teddy Bridgewater
<div class="pull-right" id="player-badges">
<span id="points-holder">
10
</span>
<span class="remove-player player-badge">
<i class="fa fa-trash-o"></i>
</span>
</div>
</li>
<li class="player pick-blank ui-droppable" data-name="" data-pick-id="534dd2424b65762a89030000">
EMPTY
<div class="pull-right" id="player-badges">
<span id="points-holder">
7
</span>
</div>
</li>
<li class="player ui-droppable" data-name="kevin" data-pick-id="534dd2424b65762a89040000">
kevin
<div class="pull-right" id="player-badges">
<span id="points-holder">
5
</span>
<span class="remove-player player-badge">
<i class="fa fa-trash-o"></i>
</span>
</div>
</li>
</div>
And I'm making an array of data-pick-id, how would I then rewrite this list based on the array ["534dd2424b65762a89020000", "534dd2424b65762a89030000", "534dd2424b65762a89040000"]?
Context: I'm using jquery-sortable and want to preserve the dom structure of the data-pick-id only. That way I can change all the contents and update to server while retaining the actual dom position by ID.
Again, all I want to do is loop through and write that array to each data-pick-id. Would a loop be the best option?
A simple .each() would suffice:
var ids = [1, 2, 3];
$('.player').each(function(i) {
$(this).data('pick-id', ids[i]);
});
You may wish to make the selector more explicit.