button toggles between states - javascript

I was wondering if anyone knew of some code which implements two buttons where one is just plain text and the other is say a link. When the user clicks on the link the other text becomes a button and vice versa when the user clicks the link again.
Think of it like this: One link is active the other isn't. One is a listview link and the other is a gridview text and when you click listview that link becomes text and the gridview text becomes a link. Does anyone know of an example that implements this kind of behavior or can someone show me an example in jQuery?

This will do it for you: http://jsfiddle.net/u9zfT/
Let me know what questions you have. This is pretty basic jQuery, so I'm not sure where you're getting tripped up.

I would put the text in a span with a particular id. When the link is clicked the .html for the span changes to a button. Clicked again and the span is changed back to text. Let me know if you need some code and I'll put something together for you.

Related

Need help finding button id/class etc to click

I'm writing a Python script to enter MS Teams and join a class based on a schedule, and have very little to no knowledge of markup languages/ js.
This "Join" button is what i want to click.
When i click inspect on it, I get (Highlighted in blue):
My code to click the button:
driver.get(physics)
driver.find_element_by_xpath('//input[#class=""]').click()
need help finding the class/id/ anything to be honest, to click the button.
The rest of my code: code
You can find the details of the button from below the screenshot.
But it is not recommended to use the classes for the same as they might be repetitive on the entire page.
The button is highlighted in the inspector tools.
Note: class root-160 is a dynamic class and you might not wanna use it. It will change per meeting/pages.
Screenshot of button component

How can I change the class property of element in another page, when I click the button?

I have one question.
I tried to find the solution on Google, but couldn't find the best solution.
For example, one page(first) has one button, another page(second) has button and text.
at the initial status, in the second page, when i click the button, the text will be shown and hidden.
at the first, text was hidden.
and when i click the button at the first page, it goes to the second page.
in this case, i'd like to open the text when i click the button at the first page.
For this, i need to change the css property of second text element (show) using jquery.
How can i implement this?
please give me any suggestions.
Thanks.

Change an url on an image depending on something checked before

I am trying to make an E-commerce website. I'm using Wordpress/Woocomerce.
But the guy I am working for, wanted special pages with a really special design. So he asked me for something that I did.
But now the fact is that I have a problem with the attributes and adding it to the cart button.
So I'd like to find a way to change the url on the "add to cart" button, which is an image.
Is there anyway to make an url on a page ( not in the search bar, but in the code ) change if u check or uncheck something ?
Like a radio button or anything.
Also I'm looking for a cool way to keep the selected size white once I clicked on. Actually it's just an image with an invert effect on hover . And I just found a way to make all work with 1 page per size but it would be really could if I could change the link on the add to cart button change. I just dont know how to change it.
Here is the link : http://mtcdistrup.cluster003.ovh.net/black-onyx/
As you can see, if u click on S it loads another page and on the new page the add to cart button links straight to the good product.
I hope all is clear and that u can help me a bit.

Transfer selected item from select to div and back

I'm trying to achieve something, but I don't know if it is even possible.
On a page I have a selectbox with a number of options. There's also a div section on the same page.
I would like to be able to select one or more options, press a button and make the selected items disappear from the selectbox, and appear inside the div. And all this sorted as well.
Now, I have got this part of the code working (have to admit that I "borrowed" the code from several places...)
code:
JSFiddle
The second part I'd like to achieve is to be able to select the elements in the div, click another button, and have the elements removed from the div and re-appear in the selectbox. Sorted again.
I think I have to change the type of the element when transferring from selectbox to div (maybe into an li ?), in order for them to be selectable, and on the way back, convert the type to <option> again, but I don't know how....
What happens now when I select an option and bring it to the div, the text in the div also has the form '<option>'...'</option>' , because it has been exactly copied.
I'm hoping I'm making sense here, and I hope there is someone who can point me in the right direction. If I'm going about this in the completely wrong way, please tell me.
By the way, it's easy if I was using two selectboxes, but I can't. It has to be one selectbox and one div......
Thanks, Hans
As we said in main post comments, here are some issues you have :
How to select elements in jQuery
I know that you know, but in your example you want to move elements from a div to another, you'll need for that to put each value in a div (then you'll be able to select each one).
How to make div selected
Your second issue is that you want to be able to select divs in the right box to copy them back in the select :
$("body").on("click", ".rightElements", function(key, element){
$(element).addClass("selected");
})
Then you can do :
$(".rightToLeftButton").click(function(){
// Your $(".selected") divs value go to the select
});
This piece of code provides new issues :
How can I unselect selected on clicking other divs ?
How can I select multiple divs ?
Etc. etc.
(I'm sure with practice, tests, and logic you'll do it!)
If you achieves these points, you can achieve all others of your problems, when you have a problem you can't explain with an unique phrase (who can be long :)), ask you if there are not several issues, separate them and look for answers !
It seems rude but you should take a look at :
http://eloquentjavascript.net/
https://jquery.com/
https://developer.mozilla.org/en/docs/Web/JavaScript
https://stackoverflow.com/tags/javascript/info
Regards,

Bookmarklet to select all friends and add them to an event on Facebook

I am trying to make a bookmarklet to allow me to select all my friends in the dialog to create an event on Facebook. Examining the source with Firebug shows the following:
The div container for each person gets a new class label of
selectedCheckable
when it it is clicked, So I have written this like of JS to try and select all the div's and give them this class:
$(".checkableListItem").addClass("selectedCheckable");
This works in selecting them, however when it comes time to press the "Save and close" button, the changes do not seem to have any effect in selecting all the friends to add to the event. It seems that FB has a different way of marking the friends that have been selected to add to the event. Would anyone be able to point me in the right direction so I can accomplish this? Thanks in advance, RayQuang :)
May I advise instead of making your own couldn't you just use one of these Greasmonkey scripts?
http://userscripts.org/scripts/search?q=facebook+invite&submit=
That's what I was doing and it was working for my events. Let me know if it works for you.

Categories