I've looking for a way to open the browser search function to look for text on only one page of my Wordpress site.
I want this to be self contained on one page. Basically the functionality of pressing Ctrl+F, but have it as a link or button, which in my boss' words, is "for the less tech-savvy users out there."
This is what I found so far
< a href="#" onclick="find();">Click here to search the page < /a>
Which worked great on FireFox, but did nothing in Chrome.
Is there a way to have this work in other browsers or have it so when I click the link on the page, it carries out the Ctrl+F function to open the search box?
Thanks
As far as I know, you can't fire Chrome's native find function without hitting cmd + F. But you can always use window.find(). Perhaps that will help you better
EDIT:
After some testing, I came up with this pen. It works, kinda. I tested it on Chrome, Firefox and IE. Chrome and Firefox highlight the first occurrence of the word. If you click the button fast enough, they might highlight you the second one. IE doesn't do sh*t. Perhaps you could code different solutions for different browsers, but I don't know how that'd fit in your current code. In any case, window.find() has a documentation, but this bug report suggests this method should be terminated.
Another solution entirely: use Javascript's search() or indexOf() going through your whole page (yeah I know), and based on those returns, you can hardcode something that highlights the matched area, such as wrapping it around a <span> that has yellow background. This is but a suggestion, as I have not given it much thought, but I think it will help.
Related
I've got a super strange and hard to diagnose issue. Hoping that someone on this forum has run into it before. Basically, I have a wordpress + woocommerce page loading like this:
As you can see there is a lot of extra whitespace. The problem is I can't figure out where the whitespace is coming from because every time I inspect element, the page removes the whitespace immediately and it looks (correctly) like this:
If I keep the "inspect element" window open and refresh the page, the whitespace returns, but as soon as I change the CSS in any way whatsoever (ie remove a random attribute or change anything), the page once again fixes itself.
If I locate the area where the whitespace should be (by not changing anything), there is literally nothing there that the whitespace is attached to. It's as if it's invisible.
I'm using Chrome (34.0.1847.131 m). Any ideas what could cause this strange behaviour?
This seems like an issue, somehow being caused by javascript. I've worked with WC before, and the JS they use is really buggy. I'd suggest trying to turn off javascript, and see if the issue still occurs. The next place to check would be the template itself. After that, check woocommerces filter set/action hooks. From my experience, WC's templates are super badly done (Seriously, who still uses tables). It caused me all sort of weird headaches as well.
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
I'm having a problem where the undo function (both ctrl+z and right click > undo) of html text boxes and text areas is being disabled. This is happening on pages generated from ASP.NET, and which incorporate a lot of Silverlight, JavaScript, JQuery and Ajax. It happens about 90% of the time, 10% of the time the undo works OK. It only happens when viewing the page in IE (8 + 9), it works fine in Chrome, Opera and Firefox.
It's not really practical for me to post the code on here, as there is so much of it and the problem could be burried deep anywhere in it. I'm more wondering if anyone had come across this before, or if it is a known issue. Can anyone suggest anything that might point me in the right direction?
Have you got any JS timers on the page. Even if they don't update the particular controls they can cause the control history to be wiped. I suspect it's a bug in IE.
I'm having a peculiar problem with comments in Drupal. If I enable writing comments in a node, and I put a hash tag in the url (for example, node/123#footer), it will load for a split second at the correct div and jump right back to the top. This doesn't happen on any other page of the site where there are no comments. It also doesn't happen if I disable comments or set comments to read-only for the node. It's not Javascript and it's not my theme because the same thing happens if I disable JS in my browser (tested with Chrome, Firefox, IE, and Opera) and use Garland. I've also changed the node's comment settings to every combination I could think of.
I want to use this because I have a lot of links that jump directly to a comment (each comment has id="comment-cid") but it's pretty useless right now!
Any idea where to look? Appreciate it!
Did you check thr source to see if there are any actual anchors available ?
If you have commentes over multiple pages(I mean 30 comments per page), then node/123#comment-3232 won't work if the comment-3232 is in ?page=1 or 2,3,etc.
I've a problem which is most likely some ugly CSS mistake, but I just can't spot the solution (and a few changes I tried did not help).
Some of in-text hyperlinks (not all!) are shown by Internet Explorer without the following space.
here is the example
See the link WatchBot just below the Rationale title (and a few similar links deeper in the article). Firefox, Opera, Chrome, Konqueror - all display it properly: WatchBot can. IE (6.0 but IIRC also 7.0) displays it as **WatchBot***can*.
I am using Yui-reset and yui-base. Is it possible that those libraries cause the problem?
Do you have a script running on, and altering, the content in any way? I say this because the page loads normally initially, but looks as though it undergos some modification later in the loading lifecycle.
If you think reset or base are making this happen try removing them one at a time - I haven't had any experience of this error before however (I usually use the full whack: Reset, Grids, Base and Fonts).
What I did notice however is that the first WatchBot link of the page is simply this:
<p>Have you ever been curious how is
WatchBot
picking the games to observe and save? Here is the explanation.</p>
Where as the second link looks like this:
<span>Due to the FICS limitations </span>
WatchBot<span> can
I have no idea what that second span is doing there - might be something to check up on. (It validated fine however - so there's definitely an closing span somewhere).
I'd say a good place to start would be to but a space after the anchor but before the span, rather than right after the span start tag.
Current state of the things: as steve_c spotted first, and buti-oxa confirmed, it looks like the layout is being spoiled by javascript (and as Ross noted, some extra spans are injected). Thank you all, I missed it.
I am to make experiments and selectively disable those scripts (analytics and google ads) to check whether it helps (my current bet is that maybe I have some HTML error or naming conflict)
Did you try to disable pageTracker? It seems to be the only script on your page, and it looks fine to me in its static form.
EDIT: I wondered what span Ross was talking about - I did not see any. I viewed the source. I just learned that Firefox allows to see both source and generated source (Toos/Web Developer/View Source). Sure enough, generated source has additional span inserted.
Solution: my page was spoiled by the text-link-ads script (which, in fact I activated on English blog by mistake - this is script by adkontekst.wp.pl, Polish firm). After disabling it everything is OK.
Thanks for everybody who pointed me into the right direction.