I'm trying Jquery and now I have a problem.
I want to remove an element from my webpage. So, when I press the delete button - the big element must disappear. Using the JQ I have written something like this
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
})
});
It have worked fine until I didn't add subdiv, or answer. And how the application must works now? I press the delete button and it must remove current block.
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
If you didn't understand me here the result
Respect to the funcionality:
$(document).ready(function(){
$(".delete").click(function(){
$(this).closest(".block").animate({ opacity: 'hide' }, "slow");
});
});
you should use closest instead of parents because it stop once it has found the first math and parents travels to the root of the dom. Also if you dont need the block anymore you can remove it with the jquery method remove(), after tue animation ended with a callback function.
Also you are missing some semicolons, and tags
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
}) // here needs a semicolon
});
Missing tags
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
I hope I was Useful.
Try hiding the container of the container of the delete button, which will work regardless of its class:
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".postbuttons").parent().animate({ opacity: 'hide' }, "slow");
})
});
Related
I want to know how can i get data of p element which is a children of div element. remember there are many div elements with same classes. it would be better to use events. As i am beginner I am unable to do it.
jQuery(document).ready(function($) {
$(".wp-block-wish-block-01-wish-block-01-editable").find('.social-link').on('click', function(event) {
var elementText = $(event.target).text();
console.log(elementText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
There are many blocks like this. What i want to do is that when user clicks the .social-link the text of first element p should be logged in console using jQuery or JavaScript.
This should solve your problem. It searches for the closest parent of the clicked element which has the specified class. Then it looks for the first child element (because of the >) with the specified class and extracts its text.
$('.social-link').click(function() {
var value = $(this).closest('.share-block-content').find('> .ab-testimonial-title').text();
console.log(value);
});
I suppose all of these blocks share the class share-block-content. Then it would be possible to get the text of the <p> element like this:
$(".social-link").on("click", function() {
let text = $(this).closest(".share-block-content").find("p").text();
console.log(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
What i want to do is that when user clicks the .social-link the text of first element p should be logged in console
You can do this easily by using the .closest() method to find the closest parent element with class as share-block-content and then find the first p inside that div like:
jQuery(document).ready(function($) {
$(".wp-block-wish-block-01-wish-block-01-editable").find('.social-link').on('click', function(event) {
var elementText = $(this).closest('.share-block-content').find('p:first').text();
console.log(elementText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
Plunker, because the snippet editor isn't liking me today.
Quick Info
I'm working on using .component() in place of .directive() when using Angular 1.6 to get myself more into the type of design pattern used by Angular 2. The issue is that I cannot use any references to either $tabs or $tab (the controllers for those respective components). Nothing is output by using either {{$tab.tabsCtrl.nothing}} or {{$tabs.nothing}}.
Please Note:this is not my actual scenario, but it does share a common problem with what I am actually doing.
I've searched around and I get a lot of results for the Angular 2 components, but if I am being honest reading through it is basically Greek.
Code Reference(not working in snippet editor, only for reference)
// Code goes here
angular.module('main.app', [])
.component('tabs', {
controller: function($http) {
this.tabs = [];
this.nothing = 'nada';
this.addTab = function(tab) {
this.tabs.push(tab);
}; //end addTab
this.selectTab = function(tab) {
this.tabs.map(function(item) {
item.selected = false;
});
var selected = this.tabs.filter(function(item) {
return item === tab;
});
if (selected.length) selected[0].selected = true;
}; //End selectTab
},
template: '<ul class="nav nav-tabs nav-justify justify-content-center"><li class="nav-item" ng-repeat="tab in $tabs.tabs" >{{tab.tabTitle}}</li></ul><div class="tabs-content" ng-transclude></div>',
transclude: true,
controllerAs: '$tabs'
})
.component('tab', {
require: {
'tabsCtrl': '^tabs'
},
bindings: {
'tabTitle': '#',
'selected': '<'
},
controller: function() {
this.$onInit = function() {
this.selected = this.selected || false;
this.tabsCtrl.addTab(this);
}; //end $onInit
},
transclude: true,
controllerAs: '$tab',
template: '<div class="tab" ng-show="$tab.selected"><div ng-transclude></div></div>'
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<tabs>
<tab tab-title="First Tab" selected="true">
<div class="jumbotron">
<h3>Lorem ipsum.</h3>
<p class="lead">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, in!</p>
</div>
some other text
</tab>
<tab tab-title="Second Tab">
<strong>With a header!</strong>
<div class="row">
<div class="col-6 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, quam, quod, optio qui cum rerum vel eos rem aspernatur quia maxime incidunt numquam ipsum eum neque dicta distinctio. Minus, itaque.</div>
<div class="col-6 bg-danger">Reprehenderit, numquam, rerum, reiciendis neque adipisci provident ea quo illo praesentium inventore fuga quisquam ducimus? Ipsum, autem, illo ullam corporis incidunt ad labore accusantium tempora officia quas quia eaque facere.</div>
</div>
</tab>
<tab tab-title="Potato Tab">
<h3>Big books {{$tabs.nothing||'nah'}}</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quos assumenda vero fugiat officia pariatur consequatur deserunt quisquam veniam nemo?</p>
<p>Fugiat, error, impedit, accusantium consequuntur beatae facere esse voluptatum enim animi porro commodi modi cupiditate aliquam iure ipsa. A, officiis!</p>
<p>Architecto velit quod explicabo laborum reprehenderit culpa tempora facilis minima eum. Natus aliquid eaque laboriosam accusamus dolor hic similique ad.</p>
</tab>
</tabs>
Thanks, just in case I forget to say it in the future!
The transcluded scope will be a child scope of the directive's isolate scope.
Since components use isolate scopes, you can't make use of prototypal inheritance by just doing {{$tabs.nothing}}. It would work if $tabs was exposed via $rootScope however, or any other non-isolate scope above tabs in the hierarchy (only ng-app in your example, so only $rootScope).
You can walk the scope chain manually.
Based on your example:
The current scope would be the transcluded child scope of the tab directive
The first $parent would be the isolate tab scope
The second $parent would be the transcluded child scope of the tabs directive
The third $parent would be the isolate tab scope
This gives:
{{$parent.$parent.$parent.$tabs.nothing}}
Demo: http://plnkr.co/edit/jpTGVKWKEQlmGYpaeqtZ?p=preview
In most cases this isn't really a feasible solution. Probably better to expose the functionality that the transcluded content needs via a service.
Hard to give a better solution without knowing the real use case.
Observe before hover and after hover. Instead of instantly switching, I want to create the effect that the header is being pulled down and expanded. So basically, I want the new div to appear from the top down. The html structure is as follows:
<a href="#" id='featured-article'>
<img src="img/iraq-war.jpg" class='fluid'>
<h1 class='center-text'>Featured Article: The War In Iraq</h1>
<div class="mouse-over">
<p>The Iraq War was controversial at the time blah blah blah</p>
</div>
</a>
Is there a handy way to do this with jquery? Perhaps a library or something? Or worst comes to worst, I'd like to see the raw js. Or other suggestions. Thanks
You are looking for slideDown():
$(function () {
$(".center-text").mouseover(function () {
$(this).next().stop().slideDown();
}).mouseout(function () {
$(this).next().stop().slideUp();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id='featured-article'>
<img src="http://panzura.wpengine.netdna-cdn.com/wp-content/uploads/2012/03/google-logo.png" class='fluid' />
<h1 class='center-text'>Featured Article: Article</h1>
<div class="mouse-over">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi amet accusamus saepe, velit recusandae minus deserunt natus architecto quos ex. Error, labore, sed. Unde, velit, labore. Quam qui commodi accusamus.</p>
</div>
</a>
I'm currently working in the backend of a Salesforce Desk platform, trying to code dependent dropdown menus. They use what are called Case-Themes which basically renders the layout for a client-interfacing page. The problem is, when I create my own Test Case-Theme, I can't preview it without publishing it and making it live.
My question is, if I were to use Javascript to create a conditional based on parameter values, is this a valid way to publish a live theme without messing up the front-end view/functionality.
<body>
<!-- Okay to Edit - Test Area -->
<div class="test_wrapper">
<div class="test_header">
<h1>DEVELOPMENT MODE</h1>
</div>
<hr>
<div class="test_body">
<h2>Development Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur </p>
</div>
<hr>
<div class="test_footer">
<h2>Development Header</h2>
<p>Voluptate necessitatibus inventore explicabo blanditiis veniam odio.</p>
<div id="test_button">Click</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elitinventore eligendi.</p>
<br>
<h2>Development SubSubHeading</h2>
<p>Lorem ipsum dolor sit amet, consectetur quis veritatis.</p>
</div>
<script>
$('#test_button').click(function(){
alert('You are currently in Test Mode');
});
</script>
</div>
<!-- End Test Area -->
<!-- Don't Touch - Live Area -->
<div class="live_wrapper">
<div class="live_header">
<h1>Live Mode</h1>
</div>
<hr>
<div class="live_body">
<h2>Live Subheading </h2>
<p>Lorem nis placeat vitae in qui iste laborum sequi ea.</p>
<p>Lorem delectus possimus ipsam ex, doloribus placeat. Perspiciatis.</p>
</div>
<hr>
<div class="live_footer">
<h2>Live Subheading </h2>
<p>Lorem veniam tempore provident minima, consequuntur. Qui iure blanditiis veniam odio.</p>
<div id="live_button">Click</div>
<p>Lorem vero illum necessitatibus iste rem pariatur quos autem inventore eligendi.</p>
<br>
<h2>Live SubSubHeading </h2>
<p>Lorem tus porro eligendi autem optio facilis quis veritatis.</p>
</div>
<script>
$('#live_button').click(function(){
alert('You are currently in Live Mode');
});
</script>
</div>
<!-- End Live Area -->
<script>
$(document).ready(function(){
if (window.location.search.indexOf('mode=test') > -1) {
$('.live_wrapper').hide();
$('.test_wrapper').css('display', 'block');
} else {
$('.test_wrapper').hide();
$('.live_wrapper').css('display', 'block');
}
});
</script>
As you already know, unless the URL has ?mode=test the live code should render. Can someone please point out the dangers/drawbacks of doing something like this?
As Dark Falcon said in a comment, it will show briefly while it waits for the JavaScript to fire. I would suggest adding a class to the body tag that JS adds in test mode and then you can do something like this:
body.test .live_wrapper {
display: none;
}
body.test .test_wrapper {
display: block;
}
body .live_wrapper {
display: block;
}
body .test_wrapper {
display: none;
}
This will basically set the live mode as the default until you set the class of the body to "test"
if (window.location.search.indexOf('mode=test') > -1) {
$('body').addClass('test');
}
Of course unless you're planning on changing between these on the fly, it would probably be better to turn these on or off with server-side code, assuming you are using one.
I would just use CSS for this (using display:none on the containers you want to hide).
The only drawback for using a query parameter is that if users try, they can view your test-HTML. If that is not a problem then go for it.
Just make sure you dont expose any API's that someone can exploit.
I cant get the animation of the caption / overlay to work. I want the caption to slide up and down from the bottom as the slides go in and out. I tried a bunch of things and I couldn't get it to work. My slides are made up of divs not images. Not sure if I put the HTML for the captions in the right place. I included the caption2 plugin.
Jsfiddle
<div class="cycle-slideshow slider"
data-cycle-slides = "> div"
data-cycle-fx="scrollHorz"
data-cycle-timeout="3000"
data-cycle-caption-plugin="caption2"
data-cycle-caption-fx-out="slideUp"
data-cycle-caption-fx-in="slideDown"
>
<div class="slide1 slide">
<div class= "innerWrapper" data-cycle-title="Spring">
<p class ="slide1text">This is a great div Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, unde, vel ratione nulla illum libero fuga placeat corporis molestias quisquam.</p> <img class ="slide1img" src="http://dummyimage.com/300x150/000/fff&text=slide1" alt=""/>
<br>
Click More
</div>
<div class="cycle-overlay">The Redwoods 1</div>
</div>
<div class="slide2 slide">
<div class = "innerWrapper" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens">
<img class ="slide2img" src="http://dummyimage.com/250x150/000/fff&text=slide2" alt=""/>
<p class ="slide2text">Text for slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, molestias incidunt ab voluptatibus id nemo error delectus sunt impedit illum.</p>
</div>
<div class="cycle-caption">Test</div>
<div class="cycle-overlay"></div>
</div>
</div>
Jsfiddle
Thank you for your help in advance.
Remove the "test" text from cycle-caption and put it into cycle-overlay so it is consistant with the other slides. then this javascript should get you started:
$( '.cycle-slideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
$(incomingSlideEl).find('.cycle-overlay').slideDown();
$(outgoingSlideEl).find('.cycle-overlay').slideUp();
});
you may have to play around with it a bit.
http://jsfiddle.net/w95ya/1/
Check this link to see what events you can listen for: http://jquery.malsup.com/cycle2/api/