So, I created this script which works nice:
$(function() {
$(".decorrer").click(function(e) {
x = jQuery('#1').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Futuras").click(function(e) {
x = jQuery('#2').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Passadas").click(function(e) {
x = jQuery('#3').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
<div class="col-md-3" id="status">
<ul>
<li class="decorrer">A decorrer</li>
<li class="Futuras">Futuras</li>
<li class="Passadas">Passadas</li>
<li class="2017">Passadas</li>
</ul>
</div>
<div class="col-md-7" id="dinamics">
</div>
<div style="display:none;">
<div id="1">
<p>content1</p>
</div>
<div id="2">
<p>content2</p>
</div>
<div id="3">
<div class="col-md-1" id="years">
<ul>
<li class="2016">2017</li>
<li class="2015">2016</li>
</ul>
</div>
</div>
<div class="col-md-6" id="pastExpos">
<div id="something">
<h3>something</h3>
</div>
</div>
<div id="sete">
<div class="col-md-6">
<h3>dezassete</h3>
</div>
</div>
</div>
But as soon as I change the li class="2017" from the ul under div class="status" to the ul under div class="years" (which is its intended placement), it stops working. Can you help?
Thank you
When you change the <li> class, you have to change in your Jquery too :
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
Because you're selecting the 2017 class, if you change in HTML and not in Jquery, the selector will point to nothing.
Related
I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>
Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})
try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
On my Website I have a list with different classes which maybe have content or not. If all of them are empty the whole container should be removed, but if one or more have content inside, nothing should happen.
Code Snippets:
<div class="fts">
<div class="panel-heading">...</div>
<div class="panel-collapse">
<div class="panel-body">
<div class=" bd-layoutbox-16 clearfix">
<div class="bd-container-inner">
<h5>Heading 5</h5>
<div>...</div>
</div>
</div>
<div class=" bd-layoutbox-84 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-31 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-82 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-85 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-86 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-87 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-88 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-89 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-90 clearfix">
<div class="bd-container-inner"></div>
</div>
</div>
</div>
</div>
JS
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length == 0){
$(this).parent().parent().parent().remove();
}
});
What's the problem?
Thanks for help.
You may need to rework your logic a bit by creating a function, but here's a thought ..
var removethis=1;
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length > 0){
removethis = 0;
}
});
if (removethis == 1) {
// remove parent item here
}
You can use contains selector to check any content there or not and then remove it. Below is the code
$('div.fts').each(function() {
var $this = $(this);
if ($this.find('div[class*="bd-layoutbox-"] h5').length === 0) {
$this.remove();
}
});
Demo: https://jsfiddle.net/6bh0d9yo/1/
Hi everyone i am trying to make a jquery tab but i want to use it multiple like for example in one page have 100 tab what can i do on that time.
I am trying in this DEMO link. If you click one blue button then you can see the tab. Click the red buttons like STARKS button then other tab also doesn't work. Anyone can help me here ?
<div class="icon_c">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
You have 2 issues.
The 1st is on the initTabs_ function.
It takes all the .panel divs for both MaterialTabs, it should take only the ones that are childs of the MaterialTabs element.
You should replace:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = document.querySelectorAll('.panel');
For:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
The seccond issue is with the tabs ids and href srcs in both panels references to the same ids, if you change the second panel as follows:
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive">
a
</div>
<div id="lannisters-panel1" class="panel">
b
</div>
<div id="targaryens-panel1" class="panel">
c
</div>
</div>
</div>
It should work independently of the first one.
You can found the code modified here
As an example, I'm starting with html like this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" />
</div>
<p class="theChoice"></p>
</div>
</div>
The idea being, when I select an item i.e. .choice I want to add it to the input and the .theChoice. This way it displays what the user chose but they can edit it by typing the box.
I know how to do this with jquery. However, it will be a lot of overhead and I want to learn angular. I also know Angular can really clean this up.
I've used ng-model to mirror what a user types in the input box doing this:
<div id="leftSide">
<div class="item">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
I've used ng-repeat to loop out three of the .item divs:
<div id="leftSide" ng-controller="leftSide">
<div class="item" ng-g-repeat="i in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice">This is choice</li>
</ul>
<input class="myChoice" name="myChoice[]" ng-model="choice1" />
</div>
<p class="theChoice">{{choice1}}</p>
</div>
...
</div>
and js:
myApp.controller('leftSide',function($scope,$index){
//three left boxes
$scope.number = 3;
$scope.getNumber = function(num) {
return new Array(num);
}
...
});
The problem I have is (obviously) selecting the .choice' is targeting all myng-models and not each that associate to its.editor. I'm certain I can use$indexto handle this and/or maybe ng-click. I'm just a little lost on how to target the correct one based on the.choice` I select.
I don't like the jQuery implementation, so I tried to solve your problem by pure AngularJS. You can run the snippet to check the answer:
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', function($scope) {
$scope.number = 3;
$scope.choice = [];
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.choiceClick = function(i) {
debugger;
$scope.choice[i] = 'This is choice';
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="my-app" ng-controller="AppController">
<div class="item" ng-repeat="it in getNumber(number) track by $index">
<div class="editor">
<ul class="choices">
<li class="choice" ng-click="choiceClick($index)">This is choice</li>
</ul>
<input class="myChoice" ng-model="choice[$index]" />
</div>
<p class="theChoice">{{choice[$index]}}</p>
</div>
</body>