I'm using Google translate and I'm altering it a bit. Now I'm having a weird problem. It doesn't work.
JavaScript Code
var setWidthgoog = $(".goog-te-gadget-simple").width();
$(".google-t").css({"width": (setWidthgoog) + 'px'});
HTML code
<div class="google-t">
<div id="google_translate_element">
<div class="skiptranslate goog-te-gadget" dir="ltr">
<div id=":0.targetLanguage" class="goog-te-gadget-simple" style="white-space: nowrap;">
</div>
</div>
</div>
</div>
If I put the same code in the console it works...
Thoughts?
The google translate im refering is this (the website plugin)
http://translate.google.com/manager/website/
EDIT
Thanks to War10ck i discover that the plugin is only called after aprox. 2s, is there anyway to make it to call faster?
Test with a settimeout, maybe someother code wants to override and
might be after your code
– joyBlanks
That actually worked!, tough i don't know what the google plugin may be calling after my code :S
Related
I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.
Each of these elements has this structure:
<div class="item-preview">
<div class="item-info">
<div class="tag">
<svg class="tag-public"></svg>
</div>
</div>
</div>
The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:
$('.tag-private').closest('.item-preview').hide();
And this:
$('.tag-private').parents('.item-preview').hide();
But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...
Any thoughts on how to make my JS "override" the original code? Thanks a ton.
I'm still new to web development (coming from desktop development) and my new boss already gave me a project.
I have to surround our company logo with images that link to other products of ours.
While I think I can surround the image with the logos, I want to add some text to the logos, to make it less confusing. I can imagine it to be quite... weird, for lack of a better word, if it's just a product's logo and nothing to tell the user what it is.
I have basic knowledge of PHP (I know how functions, constructors, classes, variables, etc. work, but have no real experience in it), but I don't know if this will help me in any way.
Here's an example of what I want to do (pseudo):
func onMouseOver(object m_obj)
m_obj.showCaption();
m_obj.border = new Border(Effects.Glow, Colors.Blue);
end
I have no better way of demonstrating it, so sorry if it seems somewhat confusing.
If you're a Firefox user, open a new tab and hover over one of those images, I'm trying to achieve something similar to that.
The code:
<head>
<title>NetWork Team Vorschau</title>
<link rel="stylesheet" type="text/css" href="index_style.css" >
</head>
<body>
<div class="container" >
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
<img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
</div>
</body>
</html>
Cheers in advance for any and all helpful answers or pointers in the right direction!
Simply in CSS:
.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}
<div class="container">
<div class="one">
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
</div>
</div>
JDFiddle
EDIT: + one with glowing effect perhaps
JSFiddle
I think that you can put
<title>Your text</title>
inside <img> tag.
You need to use JavaScript method (onmouseover) or a jQuery method (.mouseover()). jQuery is the most used JavaScript Framework, check in the official page. JavaScript run in the client side, in the browser.
Regards
I am trying to prepend html element into div in windows 8.1 phonegap application but its giving some weird output. Please see below code which I am using to prepend element.
var wrapper = $('.list');
wrapper.prepend("<div> Hello </div>");
It should give output like this
<div class="list">
<div> Hello </div>
</div>
But giving some weird output
<div class="list">
<head></head>
<body onload="startExec()">
<div> Hello </div>
</body>
</div>
Please get back on this as soon as possible.
Update
I am adding JavaScript Dynamic Content shim for Windows Store apps i.e winstore-jscompat. Is this issue coming because of shim?
Try This one
$('div.list').prepend("<div> Hello </div>");
I Know this is a bit late - but better late than never :)
You have pointed out the issue your self: The cause is winstore-jscompat.
Get the latest version that fixes this issue here: https://github.com/MSOpenTech/winstore-jscompat
I had this issue my self, and just verified that the newest version fixes it.
I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box appears on the right side bar at the same horizontal position as the highlighted sentence. Any ideas about how I can achieve that effect?
Here is my html structure. I used the framework of Zurb Foundation:
<section id="main">
<div class="row">
<div class="small-8 large-8 columns"id="rawdata">
<p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
<p><span class="sentence">2:47 I forgot to add something.</span></p>
<p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
<p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>
<p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
</div>
<div class="small-4 large-4 columns" id="annotations"><p></p>
</div>
</div>
</section>
JS for selecting sentence and adding annotations:
<script>
$('.sentence').click(function() {
$(this).toggleClass('sentenceStyle');
var y = $(this).offset().top;
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.css("position",'absolute');
para.style.top = y;
});
</script>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/
There are some things that you want to change in your code.
First what you want is to get the offset of the selection. That can only happen if you put an html tag around the selection and then get its offset. You can then place an absolute positioned message box by setting its left and top offset to the offset you got from html element.
In the following fiddle, I have shown a basic implementation to give you the basic idea. Hope it helps.
Fiddle
EDIT:
Try this fiddle update.(In response to author's question). I have added comments to lines of code that I added to js. I also added position: relative to css for annotations
Updated Fiddle
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");