Script issue on website - javascript

When I use dynamic options, the second option looks strange when the script is run.
I've made a fiddle with the problem http://jsfiddle.net/niklasro/GqGGA/ but it won't run the script that should activate the dynamic option:
function cities(obj){
if(obj.value == '3'){
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display='none'
}else{
$('#cities').load('/cities?regionId='+obj.value);
}
}
How can my problem be resolved?

The problem is a pseudo css class that jQuery adds a style called active and then forces it to behave. Because this is the active control it has the active styling. You can see it in your example if you click on the dropdowns.
If you force remove this styling with code like this http://jsfiddle.net/mGAs4/5/ it will go away. You can also add CSS to change what the active class does for this type of element.
Something like
select:active { background:white; }
I think this will also work
select.active { background:white; }
But I have not played around with jQuery's active support much.

Related

How can I use Javascript to center a drop down menu on a page?

I am using a third-party survey software (Qualtrics). I have a survey question, and the answer is a drop-down menu. You can see this at the bottom of the page at alsquest.org and in the image below.
I want to center the drop down menu under the question text. (Failing that, another option would be to indent the drop-down menu so that it aligns with the rest of the text; I believe the current indent is 120px.)
I have access to the HTML for the question text, but the only way I can modify the answer drop-down menu is to use JavaScript. Qualtrics allows you to add JavaScript, but I am not a coder so I have no idea what code to use. This is the code shell that they provide for the JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your JavaScript Here*/
});
My question is, what JavaScript code do I put there to center (or indent) the drop-down menu? Any suggestions or questions would be appreciated.
To do this in JavaScript, you need to 'get' the HTML element from the page, and then set the CSS style. You could do it like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.className = "dropdown-css-class";
Then in a CSS file included on the HTML page you would have to define the class:
.dropdown-css-class {
margin-left: 120px;
}
or like this:
var dropDown = document.getElementById("the-dropdown");
dropDown.style["margin-left"] = "120px";
Without seeing the HTML I can only guess at how you would center or otherwise align the drop down, but this should get you going. You can experiment with jsfiddle.
I guess you can change css by jquery like this:
First you need to find id or class of that dropdown menu. After that you can add jquery code to the code like this:
$("HERE GO ID OR CLASS FROM THAT ELEMENT").css("align","center");
or what ever you want for css.
But if you have more dropdown menus. You should get class and say
$("CLASS NAME").on('click', function(){
and here get id from clicked one and then use above code for changing css
});
This is best done with CSS. In your case, you can add the following code in the "Custom CSS" section of the Advanced Look and Feel Settings:
#QID2 > div.Inner.BorderColor.DL > div > fieldset > div {
text-align: center !important;
}
Note that this will only work for that specific dropdown in that specific survey (Nothing else will be affected). If you change your survey theme it may no longer work for you so watch out for that.
As an FYI I worked in Qualtrics Support for a year.

on click apply class with different css properties

I am trying to apply a class on click to li of my div.
This is the js I have.
$(document).ready(function() {
$('#toggleme').click(function() {
$(this1).addClass('active_class');
});
});
Now when I click at the cart, I want to change that cart image.
I am trying to do that via the css by applying the class background-image:url(""); property. But for some reason I am not able to get it working.
Here's the fiddle
Please help.
Change your JS code to this:
$(document).ready(function () {
var img=0;
$('#toggleme').click(function () {
$(this).toggleClass('active_class');
if(img==0){
$(this).find("img").attr("src", 'http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png');
img=1;
}else{
$(this).find("img").attr("src", 'http://www.daru-koi.com/images/winkelwagen.png');
img=0;
}
});
});
Here is the JSFiddle
Also note that the icon in your code is due to the img tag source and not the CSS. Therefore overwriting using CSS will not help.
The above code switches the source everytime you click.
See the cascade.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector
You have two background image rules applying to the element:
.active_class {
background-image : url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/simple-red-glossy-icons-business/086707-simple-red-glossy-icon-business-cart5.png");
}
and
style="background-image:none"
The style attribute one is more specific and "wins".
Avoid style attributes. Define the default styling in the stylesheet. (Or just remove it entirely since none is the default in the browser stylesheet).
Your jQuery is working correctly in that it is toggling the active_class when clicked. You can use developer tools (in Chrome or IE, press F12) to verify.
The problem is your jQuery targets the <li> element, but you have an <img /> element within it that is not affected by jQuery in any way.
You need to have the default cart image displayed as a background in CSS and use the jQuery to toggle between it and a different image.

Access class with specific text content and display:none

I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}

jquery set element hover

I have a page with 6 menu buttons. Each button has he's own background for hover event (CSS). Everything works fine, but now I want to make that when I'm selecting a page, I want to make that background static. Is it possible to make it with javascript? This would help the visitor to know what type of buttons he was selected.
If you don't get what I mean, I'll wrote a small code in jquery (is this just an example):
$(document).ready(function(){
$("#button-index1").makeItStaticBackground();
});
You must add a class (Ex menu-element) to element you want apply css hover effect and remove this class when the element is active.
CSS:
.menu-element:hover{
...
}
javascript:
$(document).ready(function(){
$("#button-index1").removeClass('menu-element');
});
I usually solve this by adding a active class on the server, or via JavaScript. Via JavaScript you can use some location.href === a.href magic. And in CSS it's simple:
.menu a:hover,
.menu a.active {
// definitions..
}

Remove a:hover in javascript

I have the following javascript code:
$('#s2 a').click(function(){
var cB = $(this);
var f = parseInt(cB.attr('data-f'));
var r = parseInt(cB.attr('data-r'));
var c = parseInt(cB.attr('data-c'));
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
// more stuff comes here
}
This makes a link not clickable. This all works. I also want to remove the hover effect. The CSS code for this is:
.pc a:hover {
background-color: #FFF;
I thought removing the class would do it like: cB.removeClass('pc'); but this doesn't work.
Any suggestions on how to do this?
Thank you for your time
--EDIT--
Hmm I think I see why it aint working. At the top of the document I have this:
$(document).ready(function() {
setScale();
$(window).resize(setScale);
if (!('ontouchstart' in document)) {
$('body').addClass('pc');
}
more code here
This sets the .pc a:hover for all links when opened the page on a pc rather then a touch device (e.g. iPad). I need to disable this pc hover ONLY on the links are not clickable like in:
if (pA == false && !isClickAllowed(f,r,c)) {
return false;
}
Hope this helps!
cB is the anchor which isn't being references by the CSS class you indicate, the parent would have the class pc for this to work. cB.parent().removeClass('pc'); would do it.
-- EDIT --
Following the erudite comments below it would seem that cb.parents('.pc').removeClass('pc') or cb.parents().removeClass('pc') (I've not benchmarked to see which is quicker) would be the comprehensive solution.
Good catch to James, Anthony, and Tadeck!
-- EDIT 2 --
Following the question update, I'd suggest adding another class to your links, i.e. clickable, then your CSS becomes:
.pc a.clickable:hover {
background-color: #FFF;
and you can just remove the clickable class on those links that you don't want to show the highlight. The better course of action may be to simply replace the links that are disabled with either raw text or as spans with an identifying class, i.e. disabled_link if you want to have the option to enable them later.
Though there was no HTML provided, based on the code, cB does not appear to be the element which has the class of pc but rather an ancestor of cB. You would need to remove the class from that.
If the direct parent is the only ancestor with the class of pc, you can do the following:
cB.parent().removeClass("pc")
If only one ancestor other than the direct parent has the class of pc and the parent does not, you can do the following:
cB.closest(".pc").removeClass("pc")
If multiple ancestors have the pc class, you can use the following:
cB.parents(".pc").removeClass("pc")
And finally, if multiple a tags exist within .pc then you cannot use the approach of removing the class, as this will affect all a tags within that .pc.
cB.removeClass('pc') should indeed remove aclass. Make sure your css behaves correctly in all scenarios. Also try targeting the parent
I would add a disabled class to the CSS that comes after the :hover rule and overrides it with the disabled styles, which may or may not be the default. Then, you can just do:
cB.addClass('disabled');
The reason your existing solution doesn't work is because you're removing the class from the element when its parent has the class.
Since your CSS issue was already solved, I want to point out another improvement:
I see that you are using cB.attr('data-f') to store some data, but attr should only be used for valid HTML attributes. You should consider using the jQuery data method which was created just for the purpose of storing non-attribute data into an element.
http://api.jquery.com/jQuery.data/
<p id="example">This is an example.</p>
<script>
document.getElementById('example').style.borderWidth = '4px';
</script>
Note that borderWidth is different than border-width. This can be used for the other styles. As a rule of thumb, take away the dash and make the first letter of the second word capital. If it doesn't work, Google it.

Categories