Creating multiple function on button using javascript - javascript

I am using the mobile version of this page https://new.testlivvwebsite.com/home-ck3/
You will see 3 buttons under the slider: Velour, Sunfolia, Thia. (3/7 items)
I want to write a JavaScript function that when i press on the left arrow will hide velour (the first element) and show Jolene(the 4th element) and looping this to get the 7 items when pressing on the left arrow.
I am trying to get the button by attribute using JavaScript. and my first test is to show text when i click to make sure that i am working on the right button
var slider_1 = jQuery("span[aria-label*='Go to slide 1']");
jQuery(window).ready(function() {
console.log( "ready!" );
console.log(slider_1 );
});
slider_1.click(function () {
console.log("helloworld!");
});
What i tried:
var slider_1 = jQuery("span[aria-label*='Go to slide 1']");
jQuery(window).ready(function() {
console.log( "ready!" );
console.log(slider_1 );
});
slider_1.click(function () {
console.log("helloworld!");
});
what i am expecting is to get print "helloworld" when i click on this button

Related

Getting clone() to only work onetime interchangebly

I am trying to get an image to move over to a separate box upon clicking and then to be removed with a remove button I have in my html. I figured out how to add the image upon clicking it then removing it upon clicking the remove button.
The issue I am having is: when I click the image itself, it should copy over to the right but it should only copy one time and then I must .remove() the image using the button before I can click it again so it appears once more. Right now the image appears over and over upon clicking. I tried using .stop() but that stops the function entirely, I need it to work interchangeably. How do I do this using jQuery?
JQUERY CODE:
$(document).ready(function(){
$("#john").click(function(){
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red'});
$("#johnbox").prepend(johnImage);
});
Check out the below code. You should be setting clicked to false again in your remove handler.
Here is the full code after I got your remove code.
$(document).ready(function () {
var clicked = false;
$("#john").click(function () {
if (!clicked) {
var johnImage = $("#john").clone(false);
$("h2").html("John is in the box");
$("h2").css({ 'color': 'red' });
$("#johnbox").prepend(johnImage);
clicked = true;
}
});
$("#removejohn").click(function () {
clicked = false;
$("#john").remove();
$("h2").html("Click John to put him in the Box");
$("h2").css({ 'color': 'black' });
});
});

element not clickable for chrome driver protractor angular 2

I am trying to click the second level menu options which will expand to third level. some of the menu options not getting clicked. I added browser.driver.manage().window().setSize(1280, 1024 ) in before all section.
below is my code:
it('Should expect clicking the second level menu option will expand the third level', () => {
element.all((by.css('div.panel.panel-default'))).click().then(() => {
var groupList = element.all((by.css('.list-group-header.sub-menu-header.active-element')));
// expect(groupList.get(1).getAttribute('class')).toMatch('active-element');
expect(groupList.count()).toEqual(1);
});
});
When we are dealing with multi-level menus, it's good to use protractor.ExpectedConditions for checking element's visibility and clickable status.
And in your case, use 'each()' method of protractor for clicking each element.Hope below code will help you.
Code Snippet:
var EC = protractor.ExpectedConditions;
var timeout=5000;
it('Should expect clicking the second level menu option will expand the
third level', () => {
element.all((by.css('div.panel.panel-default'))).each(function(ele,index)
{
//check whether each element becomes visibile or not
browser.wait(EC.visibilityOf(ele), timeout).thenCatch(function () {
assert.fail('element is not visibile');
});
//check whether each element is clickable or not
browser.wait(EC.elementToBeClickable(ele), timeout).thenCatch(function
() {
assert.fail('element is not click able');
});
//then click each element
ele.click().then(function(){
var groupList = element.all((by.css('.list-group-header.sub-menu-
header.active-element')));
// expect(groupList.get(1).getAttribute('class')).toMatch('active-
element');
expect(groupList.count()).toEqual(1);
});
});
});

Scroll on my div after click button with jQuery

Helo,
I have a button that displays a div after clicking this button.
But after trying many combinations of jQuery, I can not ensure that once the button clicked, the page will automatically scroll the div available while that appears.
My code
$(document).ready(function() {
var job = $("#job");
var open = $("#open");
job.hide();
open.click(function() {
job.slideDown();
$(this).fadeOut();
return false;
});
});
Thank you in advance for your answers
$("#job").hide();
$('#urBtn').on('click', function(){
if (!$("#job").is(':visible')){
$("#job").fadeOut();
}
});

Show slide-out div after click of button

I'm using simplecart.js on my site to add items to a cart. Site can be seen here.
The documentation mentions use of an After Add function:
// basic callback example
simpleCart.bind( "afterAdd" , function( item ){
console.log( item.get("name") + " was added to the cart!" );
});
I'd like to use this function in my script to make a slide out div panel to slide out once the item has been added.
The existing jQuery for the slide out panel is:
///////
///Settings object
///////
var settings = {
objSlideTrigger: '.trigger',
objSlidePanel: '.panel'
}
There is also the full jQuery in a linked file:
///////
///Slide out tab
///////
function slideOutTab() {
//Bind a click handler to the trigger
$(settings.objSlideTrigger).bind('click' , function() {
//If the panel isn't out
if(!$(settings.objSlidePanel).hasClass('out')){
//Animate it to left 0px
$(settings.objSlidePanel).animate({
'left' : '0px'
});
//Add the out class
$(settings.objSlidePanel).addClass('out');
}
else {
//Otherwise, animate it back in
$(settings.objSlidePanel).animate({
'left' : '-330px'
});
//Remove the out class
$(settings.objSlidePanel).removeClass('out');
}
});
}
$(function(){slideOutTab();});
Plus the existing simplecart javascript.
simpleCart({
checkout: {
type: "PayPal",
email: "hello#myemail.com",
},
currency: "GBP"
});
I understand that I need to use the basic callback example, but instead of the console message need to call the javascript for the slide out, but I'm not sure of the syntax. Can anyone help?
You call slideOutTab() on DOM load, so the element has a click handler attached to it.
simpleCart.bind( "afterAdd" , function(){
$('.trigger').click();
});
To check if the cart is open or not, then open if it isn't:
simpleCart.bind( "afterAdd" , function(){
if(!$(settings.objSlidePanel).hasClass('out')){
$(settings.objSlidePanel).click();
}
});
The "!" means to check if it does "not" have the class 'out.' In other words, the if statement is true if it is in, which causes the click method to fire.

mootools Fx.Slide toggle on hidden element dont't work

I'am loading some html with a request and use it as a template for all other items.
My code is:
itemDummy.destroy()
this.content.each(function(task) {
//
//more code
//
item = itemDummy.clone();
detailBox = item.getElement('.descriptionBox');
detailBox.id = "description" + task.id;
//detailBox.toggle ()
//open it on click
item.addEvent("click", function() {
new Fx.Slide("description" + task.id).toggle();
});
//
//more code
//
detailBox.inject(itemWrapper);
item.inject(wrapper);
});
If the line detailBox.toggle () is activated, my box doesn't show, but the Fx animation dont' work (the box never appears visible).
But when I set s this line commented the detailBox is shown and the toggle animation is working, but I want a hidden box at the beginning.
But when I set this line as a comment, the detailBox is displayed and the toggle animation is working, but I want the Box invisible to start with
Following Johan comment it works after the inject:
detailBoxIds.each(function (id) {
new Fx.Slide(id).hide();
//instead of $$(id).hide () or $$(id).toggle ()
//a direct toogle/hide hides the element, but the Fx.Slide can't open it again
})
$$('.taksItemWraper').addEvent ("click", function () {
var id = this.getElement('.descriptionBox').id;
new Fx.Slide(id, {
duration:300
}).toggle();
})

Categories

Resources