I am using Gtranslate plugin on WP site and it translates automatically in real time everything on website. Plugin works perfectly, but client wants to change 2 menu item names. As he says plugin translates those words wrong. For example website default language is russian and when you select english language, menu items become - Home and Contact which are generated automatically and he wants those names to be Main and Contact us.
I was thinking to use javacript to instantly change Home and Contact into different words but then header freezes and as I understand my code stops all header functions.
My code:
document.getElementById("englishLanguageSwtich").addEventListener("click", function() {
document.body.innerHTML = document.body.innerHTML.replace(/Home/g, 'Main')
});
What script should I use to instantly change menu words into another when different language is selected?
*Edit - script should find those words automatically everytime when page is reloaded.
Try This-
jQuery('#englishLanguageSwtich').on('click', function(event) {
if ($.trim($(this).val()) === 'Xyz') {
$(this).val('Abc');
} else {
$(this).val('Xyz');
}
});
Related
I have some landing pages built in a service called Unbounce. These landing pages contain buttons going to my sign-up page. The landing pages and sign-up page are in different domains, so I use Google's Cross Domain Measurement to track activity between them.
Unbounced has a behavior in their landing pages where clicks are first directed to an unseen sub-directory and then re-directed to the destination (sign-up page). This behavior causes Google's CDM to not decorate the link, and therefore I am not able to adequately track traffic that goes through my landing pages.
note: by "not decorated," I mean an "_gl" parameter isn't showing up in the link.
Visiting the provided hyperlink to my landing page, there's two buttons: "Get Started for FREE" and "Start Your 60-day FREE Trial", at the top and bottom of the page respectively. The top button is subject to the issue I described and the resulting link is not decorated when clicked. The bottom button is not subject to this behavior and produces the desired result when clicked.
I have managed to find examples of people trying to solve similar problems with forms, but it does not work the same for buttons. I'm not sure how to modify this to get it working in my case though. Any help here is appreciated.
<script>
$('.lp-pom-button, .lp-pom-text a, .lp-pom-image a').click(function(event) {
var parentClass = $(this).parent().attr('class');
var isFormRedirect =
parentClass === 'lp-element lp-pom-form' &&
window.module.lp.form.data.confirmAction === 'url' &&
lp.jQuery('form').valid() === true;
if (isFormRedirect) {
ga(function(tracker) {
var linker = new window.gaplugins.Linker(tracker);
window.module.lp.form.data.confirmData = linker.decorate(window.module.lp.form.data.confirmData);
});
} else {
ga('linker:decorate', this);
}
});
</script>
I've started using this plugin for multilevel side menu:
https://tympanus.net/codrops/2015/11/17/multi-level-menu/
When i grabbed example code from this page i saw that plugin don't it my needs.
I mean, when i will reload page, everytime main panel is opened, and i'm looking for any solution, to keep track about last opened panel.
I can use localstorge or cookies, but i don't see any way how to select opened, store this info and then call function to open this saved panel.
I don't provide example code, as i'm using this code from link.
Thank you for any ideas !
In the tympanus code when you select an item in the menu, the current class is added to the selected item (for menuItem and menuLevel). It means that you can get the current selected menuItem and menuLevel by matching this class and then save it in a cookie.
function getCurrentMenuItemSelected() {
var currentMenuItem = $(".menu__item .menu__link--current");
console.log(currentMenuItem.html());
}
function getCurrentMenuLeveItemSelected() {
var currentMenuLevel = $(".menu__level.menu__level--current");
console.log(currentMenuLevel.data("menu"));
}
getCurrentMenuItemSelected();
getCurrentMenuLeveItemSelected();
I'm using the minimal accordion tabs from the bourbon refills site, http://refills.bourbon.io/ and would like to know how I can link to a specific tab from another page in my site. When the page with the tabs loads the first tab is always displayed.
I'd like to know how to link to the page with tabs from a different page on my site but instead of having the first default tab active have the second or third tab be active. You can see exactly what I'm referring to by visiting http://codepen.io/andrewjcurrie/details/qbqvxo/ and below is the JavaScript that powers the tabs.
$(document).ready(function () {
$('.accordion-tabs-minimal').each(function(index) {
$(this).children('li').first().children('a')
.addClass('is-active').next().addClass('is-open').show();});
$('.accordion-tabs-minimal').on('click', 'li > a.tab-link', function(event) {
if (!$(this).hasClass('is-active')) { event.preventDefault();
var accordionTabs = $(this).closest('.accordion-tabs-minimal');
accordionTabs.find('.is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
accordionTabs.find('.is-active').removeClass('is-active');
$(this).addClass('is-active'); } else {
event.preventDefault();}});});
As you can see on the pen, I'm hoping to have the links work with hash tags. I'd like to be able to add #Second_Tab to the base URL and have the second tab become active when that link is accessed. Any tips or suggestions on how best to accomplish this would be greatly appreciated, Thanks!
Andrew.
Three steps to get this to work:
remove is-active from the first tab-link in your HTML
add the necessary IDs to each of your tabs (following your example, I added id="Second_Tab" etc.
update the first JS function as follows:
$('.accordion-tabs-minimal').each(function(index) {
if (window.location.hash) {
var hash = $.trim(window.location.hash);
$(hash).addClass('is-active').next().addClass('is-open').show();
} else {
$(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
}
});
This first checks if the URL has a hash and, if so, adds the necessary classes to that tab and content and displays them. If no hash is in the URL, it instead does the default behavior of displaying the first tab. You can see my working CodePen here http://codepen.io/angeliquejw/pen/xVqzKV?editors=1000
I have a problem brought about by a specific client requirement in nopCommerce.
I have a page - lets say page1 - which shows a block image which you then have to click through to get to the main part of the page (no matter how much I try to dissuade them from the extra click they are adamant - basically it's a 'glamour shot' before going to the main product grid/category page).
I have this JavaScript for the page load:
switch(window.location.pathname) {
case "/store/page1":
$(".category-page").hide();
break;
etc. (there are other functions for other things)
Followed by:
$(".landing_click").click(function () {
$(".landing_page").hide();
$(".category-page").show();
});
This all works great and displays the product grid (category page) as it should after clicking through the main image. However after viewing an individual product from the grid (going through to product details) clicking the back button on the browser takes you back to the first stage of the page1, so you have to click through the splash image/glamour shot again to get to the product grid.
To me this is logical and it is working as it should, but I need to find a way so that when the user is clicking the back button out of a product, it goes back to the product grid. Like this:
Is this possible with JavaScript? It needs to use the browser back button rather than a specific other button, although I could add one of those in addition as well.
If it were a straightforward website it would be relatively easy, but I am confined by the limitations of nopCommerce and the way the Category pages function, hence why I am looking for a JavaScript answer if possible so I can simply adapt what I already have.
Thanks
I would use location.hash to do it like this:
switch(window.location.pathname) {
case "/store/page1":
if(window.location.hash == "#landing") {
$(".landing_page").show();
$(".category-page").hide();
}
else {
$(".landing_page").hide();
$(".category-page").show();
}
break;
//The rest here
}
Followed by:
$(".landing_click").click(function () {
window.location.hash = "#category";
$(".landing_page").hide();
$(".category-page").show();
});
Now when you are in the product details page, a click on the back button will move you to /store/page1#category loading the category page directly.
I hope some of you better than me at coding can help.
I have a simple webpage (www.mypage.com). It has 5 links
Link 1 (www.mypage.com/link1.html)
Link 2 (www.mypage.com/link2.html)
Link 3 (www.mypage.com/link3.html)
Link 4 (www.mypage.com/link4.html)
Link 5 (www.mypage.com/link5.html)
Now from the main homepage, clicking on the link opens up a popup window using an iframe to display the page they clicked.
Now what I want to do is that when people click the link via the mainpage and hence get a popup/iframe, that on that page eg (www.mypage.com/link1.html) I want to hide some elements. The elements are things link Menu and Banner.
Now if a person enters one of the links manually eg typing www.mypage.com/link1.html directly into their browser, then I want the Banner and Banner to show.
Is there anyway I can do this?
Is there some javascript that can run that if it detects it's an iframe that it can do a display:none on the elements I want to hide?
Many thanks in advance.
This is how i would do it :
in the link pages (www.mypage.com/link1.html) i would have a script to verify if the hash of the url has a certain value.If it does, then hide the banners;else show the banners normally.
So when you open the page in an iframe, be sure to set the src to "www.mypage.com/link1.html#banner_off" and not to the simple "www.mypage.com/link1.html".
This way, when a user types in the browser the link address (without the hash value), your ads will be shown.
here is an example of how the script in the link pages should look like:
function manageBanners(){
if(document.location.hash == "banner_off")//hide banners
{
//code to hide banners here
var banners = document.getElementsByClassName('banner');
for(var i in banners)
banners[i].style.display = 'none';
}
//else do not alter the banners visibility
}
window.onload = manageBanners;
Of course you can use in the same way the php-query like sintax : url?banner=false and check for the parameters in the url.
Hope this helps!
The best way I can think of to detect that a page is in an iFrame is to compare the URL of the page with the URL in the browser window. If they're different, it must be in a frame.
if (top.location != location) {
// hide menu and banner
}