On the twitter login page, the label for input fields arrive inside input fields that uses a common trick with javascript/jquery. However, I went through a twitter source to figure out how they are doing that. I found onChange: it adds a class 'hasome' to a parent div and has a default text as a span, which never gets a property like display:none;.
I have tried to go through their HTML/CSS/JS but could not find their methods. Can someone please tell how twitter is doing that?
Edit
Twitter code:
<div class="placeholding-input username hasome">
<input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
<span class="placeholder">Username or email</span>
</div>
Added twitter HTML in question. When we add some code, it only add one class 'hasome' in parent div. in firebug, I could not see any property assigned to class 'hassome'. My question is where is there code which is doing that or CSS if it is achieved by CSS.
While the hasome class is applied to the parent div, it's used in a selector that's setting CSS values on the child span. So in Firebug (or Chrome or IE's developer tools), you'll need to keep an eye on that child span, not the div, to see what's going on.
You should end up seeing the following rules applied, from the CSS file t1_core_logged_out.bundle.css:
.has-content .placeholder, .hasome .placeholder
{
font-size:0!important;
z-index:-1;
-moz-opacity:0;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
}
The part of the rule that ends up taking effect is the ".hasome .placeholder" part: when an element with style .placeholder has an ancestor with class .hasome, then various techniques are used to hide that child element. It's basically using a class on a parent to control styles of a child or descendant, which is a fairly common CSS technique.
It's just displaying an absolutely positioned span over the field, then hiding it as soon as anything is entered (and re-displaying it when the field becomes blank again). The immediate hiding is why it doesn't matter that the span obscures the field. Oddly, it doesn't look like they actually used labels, although I don't see a good reason not to have.
Even though this is not what they are doing, you can accomplish the same result by using the HTML5 attribute placeholder
Keep in mind that this is supported by most major browsers with the regular exception of IE. So if this is not a concern for you, you can definitely use this.
It's CSS.
http://a0.twimg.com/a/1347042098/t1/css/t1_core_logged_out.bundle.css has the following rule:
.hasome .placeholder{font-size:0!important;z-index:-1;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}
Notice that for any .placeholder in a .hasome, its opacity is set to 0. Therefore, it doesn't show.
Not the way I would have done it, but that's how they're doing it at least.
Related
I'm trying to track an element (Text - Thank you) that appears after I click submit button, the Element Visibility trigger doesn't fire at all. I toggled "Observe DOM changes" on and used both ID and CSS selector.
Thank you text along with source code screenshot. There's no URL change or page load. Just the whole form input div get replaced by a text saying "Thank you"
https://i.stack.imgur.com/sGUTs.png
GTM screenshot (CSS selector)
https://i.stack.imgur.com/vH143.png
I also used other CSS selectors and also ID - formSuccessMessageWrap. Still doesn't work
The website is
https://www.hyundai.com/wallan/en/build-a-car/special-offers/special-offers
I am not familiar with Google Tag Manager, but I can see that "Thank You" is under an element with the following CSS:
display: none
The "display" property is different from the "visibility" property. It's possible that Google Tag Manager treats both the properties under the "Element Visibility" section.
Either way, the element that switches from "display: none" to "display: block" is not the one you have mentioned in the CSS Selector. Instead try using this selector:
#formSuccessMessageWrap
Hopefully this works. Let me know what's happens.
Edit: I just realized that you have already used "formSuccessMessageWrap" ID as a selector. Did you use the "#" sign before "formSuccessMessageWrap"? Also the question is what does the trigger do afterwards? How do you know it is not working? Also are any other Trigger Types available? Can you list them out?
I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")
I'm creating a form for a web page using HTML, CSS and Angular JS. I have managed to achieve what I want but I don't think its done in a very good way and was just wondering if there would be another way to achieve the same result? (perhaps there is not but thought I would ask anyway).
Basically im using AngularJS form to validate my form. If the form is valid, it applies the ng-valid class to the for). Within my form, I display a background image of a red X if the form is invalid and a green tick if the form is valid. As the ng-valid class is added as soon as the form is valid, I have the following CSS to change the image:
.ng-valid>div>div>div>div>a>div>div.regImg1{
background-image: url('../img/green-tick.png');
}
My standard CSS for this is:
.regImg1{
background-image: url('../img/grey-tick.png');
}
While this works, I am aware that a change to the HTML would break it. I wonder if there is a more elegent way to do this, which doesn't break when the HTML changes.
You can use the descendant selector, which is just a space separating the two selectors.
.ng-valid .regImg1 {
...
}
Yeah that is a concern with the html changing, seeing as the selector is so specific with child selectors.
a simple selector like this could do the job, without being specific to the markup structure
.ng-valid .regImg1{
background-image: url('../img/green-tick.png');
}
You may consider using a whitespace between your parent and child elements, this will tell you want any child matching the child description inside the parent no matter how deep it is.
This would give you the following:
.ng-valid .regImg1{
background-image: url('../img/green-tick.png');
}
I am not getting a tooltip to work and I think the problem is with my selector.
I had selected a plugin that is located here: http://flowplayer.org/tools/tooltip/index.html
It says that you can use the title attribute of an element as the selector. I am wanting to select menu items and attach a tooltip to each one (to describe the menu links). It seemed that the easiest way to do this is to use the title attribute. I only need to fit about 10 or less words in each tooltip. Before describing what could be the problem, let me also mention a couple things.
I have on the page a JQuery accordion too, from the jqueryui.com site. That link to the jqueryui is placed after the call to the jquery tools from http://flowplayer.org/tools/tooltip/index.html. I thought this was the jquery ui at first but jqueryui doesn't have a tooltip - though they have a dialog box that is similar but I don't need the header, just room for a few words.
So, let's see where I could have went wrong.
A) The call to the jquery tools comes before the call to the jqueryui. When that was reversed, my accordion didn't work.
B) The plugin documentation says that there is a class .tooltip which is available by default and the code also let me set the class for the tooltip to tooltip. It is definitely not getting any of the styling that I setup for the tooltip. I'm not sure how to confirm that this tooltip class exists because it only shows up when the tooltip appears.
C) My selector. At first I tried a CSS Descendant selector, just like I would in CSS. I even added a containing div with id of tooltip.
1)First selector: $('#tooltip a[title]), to get the a tags that have a title attribute. That was described in the documentation, though to me it seems like you would want to "trigger" on the anchor tag, not it's title attribute
2) Second attempt with descendant selectors $(".art-hmenu a.tt[title]") - I have inside the tag that has a class of art-hmenu an anchor tag with class tt and I want the title attribute. - didn't work.
3) lastly, I tried using ("#tooltip").find('a[title]') - thinking this would find the anchor tag with title attribute.
The documentation page says that this code will take advantage of the element's title attribute:
$("img[title]").tooltip();
That might put a tooltip on every img tag, wouldn't it? My first example above is similar in using ("#tooltip a:[title]") which doesn't work.
Maybe the title shouldn't be on the anchor tag but instead on the li tag.
I could use some help figuring this out - wherever the problem might lay, which I think is how I am making my selection.
Thanks,
Bruce
your looking for an attribute so use the $('#tooltip a').attr("title") instead.
It sounds like you are over-complicating this.
Give the link, phrase, input, button the class of "trigger" and a title. Tools will handle everything else. You can style the tooltip with a .tooltip class. You position the tooltip with the offset and position settings. If you want to get crazy with styling you can layout: or open the plugin source code and wrap html around the Append(title).
I use a website, which shows information i have no use for, so i tried to hide some of it with Stylish, an addon for Chrome to insert custom CSS.
I will try to explain better.
<div class="splitscreenleft"> <div id="toplevel"
<div class="splitscreenleft"> <div id="coursesection"
I want to hide one of those. Everything above splitscreenleft is the same on both. So the only difference is the div id below.
I must somehow hide one of the two classes based on the name of the div below it i think.
Any solutions to this problem?
You should be able to do this either via CSS or JavaScript.
You probably don't even need to search the children out. You can probably just pick the first or second one that appears on the page and style that. To do via CSS, use the first-of-type selector - http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo
div.splitscreenleft:first-of-type { display: none; }
To do this via JavaScript, you can find the parent object and then hide it:
document.getElementById("toplevel").parentNode.style.display = 'none';
You should be able to do it similarly in jQuery:
$(".splitscreenleft:has(#toplevel)").hide();
This can be accomplish by CSS, using structural pseudo-classes alone:
.parentClassName .className :nth-child(n) { display: none; }
Where n is the element you want to select. In your case you have two elements with the same class. To hide the first one, just replace n with 1, or 2 to hide the second one. You get the idea.
If you can't get access to jQuery with JS (haven't tried in chrome), you could always say
$('#topLevel').parent().hide();
the code below can change the class you defined in style sheet.
document.getElementById("testPara").className = "yourclass";