is it possible that by clicking, the class of the element change? - javascript

I want to put a switch for my website that when you click it the language of the page change. Yesterday I saw a close live example in a website.
Here's the link: http://iranfilm76.com/
The object on the left side in the header is exactly what I'm trying to achieve, but instead of changing the background i want to change the language.
I already have the functions for changing the language, my problem is the object, I download the image and css for the file.
I take a close look at the codes with firebug and when you click on the tag the class of the tag changes to class="changestyle".
How can I do this? Thanks for any suggestion.

YOUR_ELEMENT.addEventListener("click", function(){
this.classList.toggle("changestyle");
});
Demo: http://jsfiddle.net/DerekL/KpwkG/ | http://jsfiddle.net/WsGGa

For a non pure javascript approach, you can try selecting your toggle element using jquery like so:
$('element').click(function(){
$(this).toggleClass('language');
});
Then in your CSS you can apply whatever rules you want

Related

How to change the appearance of a typeform button while keeping its functionality?

I've got a link to a typeform quiz on my site, using the code they provide given instructions here: http://helpcenter.typeform.com/hc/en-us/articles/200065866-Overview-of-embedding-options (I use the popup drawer style that slides out from the side)
I would like to use my css styles on the link to match the rest of my site, but changing the class seems to break things. When I change the class on the link to
How can I change the appearance of the button without losing the functionality?
Here's what it looks like when I use the typeform class, typeform + mine, and mine alone:
http://i.imgur.com/scOdjqc.png
Here's the code:
<a
class="typeform-share"
href="https://mysite.typeform.com/to/url"
data-mode="2"
target="_blank">
Take quiz now!
</a>
<script>
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)}})()
</script>
edit: Added the image showing what happens when I play with the classes.
You should be able to add your own class and then override the styles that gets set via the https://s3-eu-west-1.amazonaws.com/share.typeform.com/share-button.css stylesheet that is automatically included.
Or, you can change the script to not include the default stylesheet for the link, by removing (from the minified-and-impossible-to-read-script) if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)} so your embed code ends up like this instead:
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()
An alternative is to use their link (not button) code and replace the text between the anchor tags with an image. Not elegant from a coding perspective, but it seems to work.
Do the following:
Change the script to this
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()</script>
And add a button class to your CSS keep the button's class as
class="typeform-share button"

Dynamic Breadcrumbs using sections of page for hierarchy

Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.

Hover function not working dynamically for each entry

So, I'm working on a page and am having a slight issue with setting up a hover funtion dynamically. What I am trying to do is for each entry, create a hover function. I tried everything I could think of but it always seems that each entry gets assigned the same hover function. So, I came to the solution I have now which works in jsfiddle but not on the website I made.
Is there a better way to create a dynamic hover function, or how can I get this to work? Any help is appreciated.
Link to fiddle
Link to website
This has nothing to do with ExpressionEngine, it doesn't even need to be done with Jquery and can be done purely with CSS.
The problem is you're outputting the JS with every loop of the channel entries instead of using a centralised JS file in your head or bottom of the body html, similar advice would be to move the CSS into a general CSS file instead of inline.
.MF {
hide the rollover text
}
.MF:hover {
hide the title and sub-title
show the rollover text
margin-left the arrow
}

Require help with css, Autosuggest jquery by Drew Wilson

Because of stackoverflows spam prevention, links + image are in pastebin. HERE
On with question-
I want it so when I click an autosuggest it works as a link but that isn't the main question here.
If you go on my website (pastebin) you can see there are boxes around the text box.
[Please look at the image, also in pastebin] (Drew's form ontop, mine below)
It must be css, but I can not find which property has to be changed.
(the form is generated on-the-fly so I can't look at the html.
thanks
Pal, thats because you have called the plugin twice at $(document).ready.
Remove the following from your $(document).ready.
$(function () {
$("input[type=text]").autoSuggest(data);
});
JSFiddle here: http://jsfiddle.net/naveen/H7ptB/
Try commenting out all the border properties and box shadow properties in the Auto Suggest CSS file.

turn focus of page to a specific part on the body

In facebook fan page tab application I click tab button and like to go to the specific
portion of the fan page content without pixel calculation.
For example to point the comment box.
for that purpose url http://www.facebook.com/pages/AAAA/4444444?sk=app_UUUU8&app_data=php
and
<div id="php"><textarea name="a"></textarea></div>
is in body
but I would like to achieve that goal automatically using Javascript?
will this do?
link
You could always style the link as a button, if you must.
Simply, Connect is enough to do that instead.
<button onclick="document.getElementById("php").scrollIntoView()">Go</button>
or
<button onclick="document.getElementById(location.hash.substring(1)).scrollIntoView()">Go</button>
is a javascript alternative to using the anchor
try the following code on click of the button
window.location.href="#php";
You can go to any part of the body using the above code and providing the id of the content you wish to go....

Categories