Goal: Reddit style voting system
Two voting buttons (up/down), with the button that i have already clicked on a post indicates this e.g. by different background color. This should happen on page load based on database value and dynamically when I click it.
If I change a vote from up to down and vice-versa, both buttons should change.
Background:
As a base, I am using this plugin: https://janosgyerik.github.io/upvotejs .
It is basically running, and I managed to exchange the use of the .svg to show the arrows with text so that I can easily change what symbol to use for the buttons.
Problem:
With my limited knowledge, I am struggling for hours now to get the buttons to indicate the vote status on page load and to dynamically change them as mentioned above.
<div id="topic_{{$deal->id}}" class="topic pb-1 pt-1 pl-2 pr-2 upvote d-inline-flex btn vote-button border" data-id="{{$deal->id}}" data-votes="{{$deal->votes}}" >
<a class="upvote vote" data-value="1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;color:red' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">add</span>
</a>
<div class="count ml-3 mr-3" style='font-size:20px;color:red'>{{$deal->votes}}</div>
<a class="downvote vote" data-value="-1" data-id="{{$deal->id}}">
<span class="material-icons" style='font-size:24px;' data-voted="{{$deal->upvoted}}" data-id="{{$deal->id}}">remove</span>
</a>
<a class="star" style="display: none"></a>
</div>
I want to add the class "voted-toggle" to the span for the upvote or the downvote accordingly on page load and on click.
The "data-voted" attribute has value 1 for upvote, value -1 for downvote and 0 for no vote. The "data-id" attribute is the unique post id.
How can I achieve to add / remove the "voted-toggle" class to indicate which way the user has voted on page load and on click?
Related
I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()
Originally I thought I have to access my class before trying to click the button.
How can I use below code to click "red trash icon"?
<div class="one wide column">
<div class="ui vertical right floated buttons">
<a class="ui basic button" role="button" href="/admin/assignments/edit/37">
<i aria-hidden="true" class="cog icon"></i>
</a>
<button class="ui basic button">
<i aria-hidden="true" class="red trash icon"></i>
</button>
</div>
</div>
The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:
cy.get('.red.trash.icon').click()
The red trash icon is the <i> element of inside the button, not the button itself.
You should perform click on the button itself:
cy.get('.button').click()
And if there is more than one button with the selector you have set you can give it a specific class or a specific id:
<button id="whatever">...
cy.get('#whatever').click()
Notice the use of # for ids instead of the dot . as a class selector.
The problem is you're using a too broad CSS selector.
You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.
For example you could select the last button with .red class like this
cy.get('button.red:last-of-type')
or the first one line this
cy.get('button.red:first-of-type')
or the X element using something like button.red:nth-of-type() { ... }
As recommended in the Cypress documentation, you should add a custom data-cy attribute instead of using generic selectors
I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks
Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>
I'm using ajaxify for some add to cart funcionality of my shopify collection page.
All works fine however I need to hide a div once the item has been added to cart and display another.
The Html looks something like this
<div class=“col-add-to-cart”>
<div class="col-add-btn-container">
<button type="submit" name="add" class="add-to-cart-main" data-add-to-cart="">
<span data-add-to-cart-text="">Add to cart</span>
</button>
<p class="ajaxified-cart-feedback success" style=""><i class="fa fa-check"></i> Added to cart! <a href="/cart">View
cart</a> or continue shopping.</p>
</div>
<div class="col-container">
<div class="col-add">
<div class="expand-icon expanded">
</div>
<div class="checkmark">
</div>
</div>
</div>
</div>
And the relevant JS
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success', '<i class="fa fa-check"></i> Added to cart! View cart or continue shopping.', $addToCartForm);
window.setTimeout(function () {
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
$('.col-add-to-cart').find('.expand-icon.expanded').css("display", "none");
$('.col-add-to-cart').find('.checkmark').css("display", "block");
_setText($addToCartBtn, _config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
So as you can see I'm setting the checkmark to display: block and hide the expand-icon.expanded.
This works for the expand-icon as only one on the page has the .expanded class, however it shows all the .checkmark divs for each product. I only need it to display for the checkmark within the same container div as the .ajaxified-cart-feedback .success div. I've tried to do that with the col-add-to-cart container but doesn't seem to work.
You need to limit your query to a certain scope. From the info you provided I can't tell for sure what is happening, but you could try replacing $('.col-add-to-cart') with $addToCartBtn.closest('.col-add-to-cart')
The first one will select every element on the page with that class, causing the effect you observed. The second will start from $addToCartBtn (which I am assuming is a single element, in the context you need), find its closest parent with 'col-add-to-cart', then allowing you to "find" within the right context.
You could also try starting the query from $addToCartForm. It is not clear which element it refers to, but if it works for _showFeedback, it might work for your case too. That would look like this: $addToCartForm.find('.checkmark').css("display", "block");
I am using Angular version one, I had created lists of posts in my news feed. Each of the post consists of several action buttons. When I hit button X, the post will bump up to the top. It works same way as OpenStudy.
Illustration
Post#1 ---------------------------------------------------> Post#4
Post#2 ---------------------------------------------------> Post#1
Post#3 ---------------------------------------------------> Post#2
Post#4 (When button triggered in Post#4)------> Post#3
Post#5 ---------------------------------------------------> Post#5
Button X
<li>
<a id="bump-btn" href="javascript:void(0);">
<i class="fa fa-gavel" aria-hidden="true"></i>
</a>
</li>
How can I create such an animation effect in AngularJS?
You can see http://www.nganimate.org/ or you can use native js animation
I am working with a plugin that provides IDX data for listings on a WordPress website. The plugin uses jQuery to query a database for information that it displays on the page. The plugin is not very customizable past simple styling and I would like to insert a link to save to favorites
The link for saving to favorites can be found by viewing this page:
http://angelandpatty.com/homes-for-sale-details/8635-La-Entrada-Avenue-Whittier-CA-90605/PW14217291/306/
All the property details pages have the "save to favorites" button at the top of the page. This is what I found with the inspector:
<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>
I am assuming the data-target is what is causing the button to take action.
What I would like to do is find a way to insert this same button, perhaps with a different icon like a thumbs up or a star, into the property stubs.
The property stubs are viewable on pages like this:
http://angelandpatty.com/homes-for-sale-in-friendly-hills/
I would like to find a way to insert this possibly after #ihf-main-container .col-xs-9
If there is any way to do this with Javascript or with jQuery I sure would like to know.
Thank you for all of your assistance. I tried searching for some situation like this but was unlucky
Are you looking for the following answer?
var button = $('<a data-toggle="modal" data-target="#ihfsaveListing" class="btn btn-primary btn-detail-leadcapture save-listing-btn"> <span class="hidden-xs"> <i class="glyphicon glyphicon-heart fs-12"></i> Save To Favorites </span> <span class="visible-xs fs-12"> Save To<br>Favorites </span> </a>');
$('#ihf-main-container .col-xs-9:first').after(button);
See: http://api.jquery.com/after/
.after(content [, content ] )
Description: Insert content, specified by the parameter, after each element in the set of matched elements.
You may need to initialize the button as required.