Facebook button is not working on IE8 at starting it is coming like in screenshot and after 45 seconds it disappears automatically with error
fb:login_button failed to resize in 45s
2 more error getting while opening page are:
FB.init has already been called - this could indicate a problem.
The "fb-root" div has not been created, auto-creating.
even after refreshing the page button is not coming.
after deleting browser history button again shows like in attached image and on click and
after entering Facebook login credentials again it is getting disappears and not working as it
should.
following is javascript code.
function initialize_fb(p_config) {
config = p_config;
window.fbAsyncInit = function () {
FB.init({
appId: config.appId,
channelUrl: config.channelURL,
status: true,
cookie: true,
xfbml: true
});
};
(function (d, debug, config) {
//console.log(config);
var js, id = "facebook-jssdk",
ref = d.getElementsByTagName("script")[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement("script");
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js#xfbml.js=1&appId=" + config.appId;
ref.parentNode.insertBefore(js, ref);
}(document, false, config));
}
function fshowuser(p_image, p_name, p_url, p_function, p_uid) {
var inner_htm;
showUserFunction = p_function;
if (p_name == "") {
isModify = false;
inner_htm = "<fb:login-button show-faces='false' width='100' max-rows='1' onlogin='{2}' id='buttonFBConnect'>{3}</fb:login-button>";
} else {
isModify = true;
if(! isRemoveRequired) {
inner_htm = "<table><tr><td rowspan='2'><img src='{0}' alt='{1}' id='fbModify'></td><td id='fbFrndName'>{1}</td></tr><tr><td><fb:login-button show-faces='false' width='100' max-rows='1' onlogin='{2}'>{4}</fb:login-button></td></tr></table>";
}else{
inner_htm = "<table><tr><td rowspan='2'><img src='{0}' alt='{1}' id='fbModify'></td><td id='fbFrndName'>{1}</td></tr></table>";
}
if (p_uid != undefined && p_uid != null && p_uid != "") {
inner_htm += "<input type='hidden' name='fb_uid' id='fb_uid' value='" + p_uid + "'>";
}
inner_htm += "<input type='hidden' name='fb_access_token' id='fb_access_token' value='" + accessToken + "'>";
}
$("#" + config.divId).html(inner_htm.format(p_image, p_name, p_function, config.connectText, config.modifyText, config.delinkText));
FB.XFBML.parse(document.getElementById(config.divId));
}
and following is html tag
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" >
and it seems like button is not rendering correctly following is html code after button
gets disappears which is not completed:
<iframe name="f17348a353fff43" width="100" height="1000" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/plugins/login_button.php?login_text=Connect&show_faces=false&max_rows=1&width=100&app_id=645653312120915&locale=en_US&sdk=joey&channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Df257016bf55bb8c%26origin%3Dhttps%253A%252F%252Flocalhost%253A7003%252Ffda8d5ab9fe0b6%26domain%3Dlocalhost%26relation%3Dparent.parent" frameBorder="0" scrolling="no" style="border-bottom: medium none; border-left: medium none; visibility: visible; border-top: medium none; border-right: medium none;" allowTransparency="allowtransparency">
I have tried to Google allot but nothing is working.
code is working fine in Google chrome and Firefox browsers.
so anybody knows solution?
Matt Bower from Facebook developer's forum gave this temporary solution:
#fb_login_button {
width: 80px;
}
#fb_login_button span,
#fb_login_button iframe {.
width: 80px! important;
height: 25px! important;
}
Facebook Dev's are working to fix this error.
I encountered the same issue. I had conflicting CSS selectors.
I had to change:
class="menu-icon"
to
class="mysite-menu-icon"
I recommend going through all your class and id attributes and test any common names you see. Note that you need to test the HTML attributes not your CSS selectors.
I have the same problem,
fb:like_box failed to resize in 45s
I have fixed this problem temporary
Please add this CSS,
.fb-like-box iframe{width:250px !important;height:200px !important;}
i hope this will help.
If this is happening in Chrome, disable all of your extensions, even the ones that could not possibly be the problem. Reload the page and see if that resolved it.
Related
I have this button that will hide when no more content to load in review page. The button is working great except that it will still show up even if there are no more data to display. I want it to not show up if there is nothing left to load. Does anyone have any suggestions? Thank you.
Here is my code
$(document).unbind('click').on('click', ".recentreviews5 .showmore", function () {
$('#last').val(parseInt($('#last').val()) + 10)
$('.hide').each(function () {
var itmidx = $(this).index();
if (parseInt(itmidx) < parseInt($('#last').val())) {
var g = $(this).attr('id')
$(this).removeClass('recent').removeClass('hide')
$(this).addClass('recent').addClass('show')
}
});
if ((parseInt($('#last').val()) >= parseInt($('#total').val())) || (parseInt($('#last').val()) < 10)) {
$(".showmore").css('cssText', 'display:none!important')
}
});
You can use this code to manually set the style. The .css call generally speaking doesn't support !important.
$(".showmore").attr('style', 'display: none !important')
$(".showmore").attr('hidden', 'hidden')
This code toggle visibility with display:none / display:block
$(".showmore").toggle();
Hi I just added Google's No CAPTCHA reCAPTCHA to my website, and I am running into a small little issue. It does NOT fit on my mobile website, and that is a HUGE issue. I have tried everything such as:
HTML
<div id="captchadisplay">
<div class="g-recaptcha" data-sitekey="???"></div>
</div>
CSS
#captchadisplay {
width: 50% !important;
}
and
CSS
.g-recaptcha {
width: 50%;
}
Yet I can not seem to shrink it down for my mobile website. Any ideas? :)
By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA.
By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device:
<div class="g-recaptcha"
data-theme="light"
data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;">
</div>
More details can be found on my site: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
I successfully implemented Geek Goddess' solution. The main issue with it is that it may not work on all browsers. Now, however, there is a simple solution provided by Google.
With reCAPTCHA version 2.0, there are new rules for the display of the widget and Google added tag attributes that change the way it is rendered.
The tag data-size can take the values of "normal", which is the default, and "compact", which fits in mobile device screens. This is what the compact widget looks like.
It is not the best looking widget, but it fits with less work than the other solutions.
For more attributes, check Google's reCAPTCHA v2.0 documentation
I have been using some JQuery, since putting transform(0.77) in the style attribute wasn't a truly responsive solution.
I add this media query in my CSS, with the max-width being the threshold where the ReCaptcha box is considered too large once passed:
#media(max-width: 390px) {
.g-recaptcha {
margin: 1px;
}
}
I then add this JQuery:
$(window).resize(function() {
var recaptcha = $(".g-recaptcha");
if(recaptcha.css('margin') == '1px') {
var newScaleFactor = recaptcha.parent().innerWidth() / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
}
else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
}
});
The 304 I use is the default width of the ReCaptcha box if unstyled.
Now the ReCaptcha will properly scale down no matter how small its parent container becomes, and it will behave as if it has a maximum width at its original width.
Note that the media query is simply a mechanism to detect a screen size change.
According to the documentation from Google shows a data-size attribute which can be set and this worked for me.
<div class="g-recaptcha" data-sitekey="XXXXXXXX" data-size="compact"></div>
But, the answer from #GeekGoddess provides a little more flexibility in sizing.
For me the compact mode implementation of Google re-captcha 2.0 is just lame. It looks ugly.
Just expanding from "Geek Goddess" solution.
You can do the following:
<div class="g-recaptcha" data-sitekey="..." style="-moz-transform:scale(0.77); -ms-transform:scale(0.77); -o-transform:scale(0.77); -moz-transform-origin:0; -ms-transform-origin:0; -o-transform-origin:0; -webkit-transform:scale(0.77); transform:scale(0.77); -webkit-transform-origin:0 0; transform-origin:0; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.77,M12=0,M21=0,M22=0.77,SizingMethod='auto expand');"></div>
That will resize on almost all browsers IE, Chrome, FF, Opera (DXImageTransform is for IE <= 8).
Furthermore we can make it responsive by combining this transform scale with CSS max-width.
It's not the perfect way, but until we get the proper responsive fix from Google.
If you don't like the CSS solution, you may try the JS.
The idea is to dynamically switch between compact and normal mode of the recaptcha plugin.
I will provide an example with jQuery onboard, but it shouldn't be much to port it to pure JS.
I assume you have following HTML code on the site.
<div>
<div class="g-recaptcha" data-sitekey="[your-key-here]"></div>
</div>
Firstly you need to load gRecaptcha 2 explicitly and provide onload callback:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=en&onload=recaptchaCallback&render=explicit'>
Next, create your callback function which will also be your javascript media query.
function recaptchaCallback()
{
var mq = window.matchMedia("(max-width: 400px)");
mq.addListener(recaptchaRenderer);
recaptchaRenderer(mq);
}
The last thing is to render the recaptcha widget.
function recaptchaRenderer(mq)
{
var recaptcha = $('.g-recaptcha').eq(0);
var data = recaptcha.data();
var parent = recaptcha.parent();
recaptcha.empty().remove();
var recaptchaClone = recaptcha.clone();
parent.append(recaptchaClone);
recaptchaClone.data(data);
var options = {
'sitekey': data['sitekey'],
'size': 'compact'
};
if(!mq.matches)
{
options['size'] = 'normal';
}
grecaptcha.render(recaptchaClone.get(0), options);
}
You may wonder why I empty the div and clone all the g-recaptcha content. It's because gRecaptcha 2 wouldn't let you render second time to the same element. There could be a better way, but it's all I found for now.
Hope this works for you.
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX" style="transform:scale(0.77);transform-origin:0 0"></div>
Just add style="transform:scale(0.77);transform-origin:0 0"
For who might be interested, I changed a little AjaxLeung solution and came up with this:
function resizeReCaptcha() {
if ($(".g-recaptcha").length) {
var recaptcha = $(".g-recaptcha");
recaptcha.parent().addClass('col-xs-12 padding0');
var innerWidth = recaptcha.parent().innerWidth();
if (innerWidth < 304) {
var newScaleFactor = innerWidth / 304;
recaptcha.css('transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('-webkit-transform', 'scale(' + newScaleFactor + ')');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
} else {
recaptcha.css('transform', 'scale(1)');
recaptcha.css('-webkit-transform', 'scale(1)');
recaptcha.css('transform-origin', '0 0');
recaptcha.css('-webkit-transform-origin', '0 0');
}
}
}
$(window).resize(function() {
resizeReCaptcha();
});
$(document).ready(function () {
resizeReCaptcha();
});
Here's my spin on the resize:
<script>
function resizeReCaptcha() {
var width = $( ".g-recaptcha" ).parent().width();
if (width < 302) {
var scale = width / 302;
} else {
var scale = 1;
}
$( ".g-recaptcha" ).css('transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('-webkit-transform', 'scale(' + scale + ')');
$( ".g-recaptcha" ).css('transform-origin', '0 0');
$( ".g-recaptcha" ).css('-webkit-transform-origin', '0 0');
};
$( document ).ready(function() {
$( window ).on('resize', function() {
resizeReCaptcha();
});
resizeReCaptcha();
});
</script>
Unfortunately, NoCaptcha uses an iframe so at most you can control the height/width and use overflow:hidden; to cut off the excess. I would not recommend cutting off more than a few pixels of the Captcha for best usability.
Example:
.g-recaptcha {
max-width: 300px;
overflow: hidden;
}
On my site the re-captcha was getting cut off and looked bad.
After some experimentation I was able to fix the cutoff issue with this style update:
<style>
.g-recaptcha>div>div>iframe {
width: 380px;
height: 98px;
}
</style>
Hope you find this useful
#media only screen and (max-width : 480px) {
.smallcaptcha{
transform:scale(0.75);
transform-origin:50% 50%;
}
}
<div class="g-recaptcha" data-theme="light" data-sitekey="your site key" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
This working for me, you try it..
<div class="g-recaptcha" data-theme="dark"></div>
I have tried following code for make the required field to notify the required field but its not working in safari browser.
Code:
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
Above the code work in firefox. http://jsfiddle.net/X8UXQ/179/
Can you let me know the javascript code or any workarround? am new in javascript
Thanks
Safari, up to version 10.1 from Mar 26, 2017, doesn't support this attribute, you need to use JavaScript.
This page contains a hacky solution, that should add the desired functionality: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
HTML:
<form action="" method="post" id="formID">
<label>Your name: <input required></label><br>
<label>Your age: <input required></label><br>
<input type="submit">
</form>
JavaScript:
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
alert('Please, fill the form'); // error message
}
}, false);
You can replace the alert with some kind of less ugly warning, like show a DIV with error message:
document.getElementById('errorMessageDiv').classList.remove("hidden");
and in CSS:
.hidden {
display: none;
}
and in HTML:
<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>
The only drawback to this approach is it doesn't handle the exact input that needs to be filled. It would require a loop accross all inputs in the form and checking the value (and better, check for "required" attribute presence).
The loop may look like this:
var elems = form.querySelectorAll("input,textarea,select");
for (var i = 0; i < elems.length; i++) {
if (elems[i].required && elems[i].value.length === 0) {
alert('Please, fill the form'); // error message
break; // show error message only once
}
}
If you go with jQuery then below code is much better. Just put this code bottom of the jquery.min.js file and it works for each and every form.
Just put this code on your common .js file and embed after this file jquery.js or jquery.min.js
$("form").submit(function(e) {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
e.preventDefault();
return false;
}
}); return true;
});
This code work with those browser which does not support required (html5) attribute
Have a nice coding day friends.
I had the same problem with Safari and I can only beg you all to take a look at Webshim!
I found the solutions for this question and for this one very very useful, but if you want to "simulate" the native HTML5 input validation for Safari, Webshim saves you a lot of time.
Webshim delivers some "upgrades" for Safari and helps it to handle things like the HMTL5 datepicker or the form validation. It's not just easy to implement but also looks good enough to just use it right away.
Also useful answer on SO for initial set up for webshim here! Copy of the linked post:
At this time, Safari doesn't support the "required" input attribute. http://caniuse.com/#search=required
To use the 'required' attribute on Safari, You can use 'webshim'
1 - Download webshim
2 - Put this code :
<head>
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
</head>
I have built a solution on top of #Roni 's one.
It seems Webshim is deprecating as it won't be compatible with jquery 3.0.
It is important to understand that Safari does validate the required attribute. The difference is what it does with it. Instead of blocking the submission and show up an error message tooltip next to the input, it simply let the form flow continues.
That being said, the checkValidity() is implemented in Safari and does returns us false if a required filed is not fulfilled.
So, in order to "fix it" and also show an error message with minimal intervention (no extra Div's for holding error messages) and no extra library (except jQuery, but I am sure it can be done in plain javascript)., I got this little hack using the placeholder to show standard error messages.
$("form").submit(function(e) {
if (!e.target.checkValidity()) {
console.log("I am Safari"); // Safari continues with form regardless of checkValidity being false
e.preventDefault(); // dismiss the default functionality
$('#yourFormId :input:visible[required="required"]').each(function () {
if (!this.validity.valid) {
$(this).focus();
$(this).attr("placeholder", this.validationMessage).addClass('placeholderError');
$(this).val(''); // clear value so it shows error message on Placeholder.
return false;
}
});
return; // its invalid, don't continue with submission
}
e.preventDefault(); // have to add it again as Chrome, Firefox will never see above
}
I found a great blog entry with a solution to this problem. It solves it in a way that I am more comfortable with and gives a better user experience than the other suggestions here. It will change the background color of the fields to denote if the input is valid or not.
CSS:
/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
background: #BE4C54;
}
.invalid textarea:required:invalid {
background: #BE4C54;
}
.invalid select:required:invalid {
background: #BE4C54;
}
/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
background: #17D654 ;
}
.invalid textarea:required:valid {
background: #17D654 ;
}
.invalid select:required:valid {
background: #17D654 ;
}
JS:
$(function () {
if (hasHtml5Validation()) {
$('.validate-form').submit(function (e) {
if (!this.checkValidity()) {
// Prevent default stops form from firing
e.preventDefault();
$(this).addClass('invalid');
$('#status').html('invalid');
}
else {
$(this).removeClass('invalid');
$('#status').html('submitted');
}
});
}
});
function hasHtml5Validation () {
return typeof document.createElement('input').checkValidity === 'function';
}
Credit: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
(Note: I did extend the CSS from the post to cover textarea and select fields)
I use this solution and works fine
$('#idForm').click(function(e) {
e.preventDefault();
var sendModalForm = true;
$('[required]').each(function() {
if ($(this).val() == '') {
sendModalForm = false;
alert("Required field should not be blank."); // or $('.error-message').show();
}
});
if (sendModalForm) {
$('#idForm').submit();
}
});
The new Safari 10.1 released Mar 26, 2017, now supports the "required" attribute.
http://caniuse.com/#search=required
You can add this event handler to your form:
// Chrome and Firefox will not submit invalid forms
// so this code is for other browsers only (e.g. Safari).
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
var inputFields = form.querySelectorAll('input');
for (i=0; i < inputFields.length; i++) {
if (!inputFields[i].validity.valid) {
inputFields[i].focus(); // set cursor to first invalid input field
return false;
}
}
}
}, false);
Within each() function I found all DOM element of text input in the old version of PC Safari, I think this code useful for newer versions on MAC using inputobj['prpertyname'] object to get all properties and values:
$('form').find("[required]").each(function(index, inputobj) {
if (inputobj['required'] == true) { // check all required fields within the form
currentValue = $(this).val();
if (currentValue.length == 0) {
// $.each((inputobj), function(input, obj) { alert(input + ' - ' + obj); }); // uncomment this row to alert names and values of DOM object
var currentName = inputobj['placeholder']; // use for alerts
return false // here is an empty input
}
}
});
function customValidate(){
var flag=true;
var fields = $('#frm-add').find('[required]'); //get required field by form_ID
for (var i=0; i< fields.length;i++){
debugger
if ($(fields[i]).val()==''){
flag = false;
$(fields[i]).focus();
}
}
return flag;
}
if (customValidate()){
// do yor work
}
I have a menu inside a masterpage (in a ASP.NET Web site), and i want to highlight active page in masterpage menu and submenus.
HTML:
<ul id="nav" class="sf-menu">
<li class="current-menu-item">Home</li>
<li>menu-2
<ul>
<li>full</li>
<li>featurs</li>
<li>typography</li>
</ul>
</li>
</ul>
CSS:
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #fe8300;
}
thanks in advance.
finally i solved my problem with using jQuery:
var str=location.href.toLowerCase();
$("#nav li a").each(function() {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.current-menu-item").removeClass("current-menu-item");
$(this).parent().addClass("current-menu-item");
}
});
$("li.current-menu-item").parents().each(function(){
if ($(this).is("li")){
$(this).addClass("current-menu-item");
}
});
There are many ways to do this. There are some easy and some ugly hacky ones:
Solution 1:
Use a Menu Control. The standard .NET Menu Control has an easy solution to do this. This is the cleanest and fastest solution in my opinion. Have a look at this post. Maby it'll help you if you choose this solution.
Solution 2:
You coud use some sort of javascript to highlight the current item. jQuery would make that easier if you dont want to write everything by yourself. For this solution have a look at this page. It's outdated but still effective.
Solution 3:
This is kinda ugly solution and you can do that in many different ways: You could change the <a> elements to HyperLink controls and set some sort of session or cookie when you click on them. When set you could change the style based on the value the cookie has.
There are even more ways you could solve this but I think the first two solutions will help you.
check your url and get the html file name then compare it and set your css class in master page or make a menu UserControl seperate and then put it on master page.
You have to change your anchor tag to Hyperlinks
asp.net markup :
<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li>
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li>
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li>
Codebehind :
protected void SelectMenu()
{
try
{
string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath);
string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath);
string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty;
if (pageDirectory.Length > 3)
{
pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2);
}
if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0)
{
switch (pageDirectory)
{
case "Secure\\Clients":
switch (page)
{
case "page-full":
lnk_full.CssClass = "current-menu-item";
break;
case "page-features":
lnk_features.CssClass = "current-menu-item";
break;
case "page-typography":
lnk_typography.CssClass = "current-menu-item";
break;
}
break;
}
}
}
catch (Exception ex)
{
throw ex;
}
}
If your webpages are in root directory then don't switch for pageDirectory. and if you are using querystrings then you can switch for category. Hope this is helps you.
$(function () {
$(".navbarâbtn a").each(function () {
var hreff = this.href.trim().split("/").splice(3, 4);
if (hreff.length > 1)
hreff.splice(0, 1);
if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0])
$(this).parent().addClass("active");
});
})
This works fine for me during development and in local, but when I host it on IIS the active highlighting on the menu does not work. What am I missing here?
Masterpage code below
$(document).ready(function () {
//You can name this function anything you like
function activePage() {
//When user lands on your website location.pathname is equal to "/" and in
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
var currentPage = location.pathname;
var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
$('.nav-link').removeClass('active');
$('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
if (location.pathname == "/") {
$('a[href*="index"]').closest('li').addClass('active');
}
}
//Invoke function
activePage();
});
jQuery(document).ready(function() {
var str = location.href.toLowerCase();
jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
});
I tried to display a image when a mouseover on text occurs. It works fine. And the alignment of the image should be shown such that the end of the image should be at the container. It works fine with the code shown below, Only in IE7. In everything, it gets chopped off.. What is wrong here?
<td valign="middle" class="table_td td" style="width: 347px">
<span class="feature_text" style="cursor:pointer"
onmouseover="ShowPicture('Style16',1)"
onmouseout="ShowPicture('Style16',0)" id="a16">
Storefront Window Decal</span>
<div id="Style16" style="position:relative;height:0px;left:50%;bottom:700%;
visibility:hidden; border:solid 0px #CCC; padding:5px">
<img src="images/window-decal-image.gif"></div>
<script language="javascript" type="text/javascript">
function ShowPicture(id,Source)
{
var vis, elem;
if (1 == Source)
{
vis = "visible";
}
else if (0 == Source)
{
vis = "hidden";
}
else
{
throw new RangeError("Unknown Flag");
}
if (elem = document.getElementById(id))
{
elem.style.visibility = vis;
}
else
{
throw new TypeError("Element with id '"+id+"' does not exist.");
}
return vis;
}
</script>
Can someone help me out. Thanks in advance!!
I'd suggest using background-image on your div instead of a separate <img> tag, and background-position:right; to align it as per your requirements.
You may need a few other related bits of CSS to get it perfect (background-repeat maybe?), but I'd suggest that's the way to do it.
I'd also suggest moving all that style code into a separate CSS <style> element to reduce the clutter in your HTML code and make it more readable.