I need a bit of Javascript that will find some text in the html page and then scroll to that point.
So something like "Are you a Lib Dem or Tory supporter and how do you feel about the deal?" would scroll down to the bottom of the page for this bbc news page: http://news.bbc.co.uk/1/hi/uk_politics/election_2010/8676607.stm
Im hoping there is a built in function for both the find text and scroll.
Try this. It works on the site you provided:
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
It finds last, deepest element that contains given phrase on the page and scrolls to it.
If you want to do the same thing without jQuery you need to use XPath becasue CSS didn't get contains() selector.
window.scrollBy(0, document.evaluate("//*[text()[contains(., 'Lib Dem')]][last()]", document.body).iterateNext().getBoundingClientRect().top);
If you need to scroll to the first occurrece, not the last one, delete [last()] from this code.
You can also use what google is using to scroll to and highlight specific portions of a search result when you visit the page.
It generates a URL like this:
https://www.inc.com/peter-roesler/heres-what-googles-new-highlight-feature-means-for-your-website.html#:~:text=If%20you%20see%20a%20featured,saw%20in%20the%20featured%20snippet.
It is kind of nifty. The syntax seems to be:
https://example.com/#:~:beginning_of_text,end_of_text
See the following blog post for a few more details:
https://web.dev/text-fragments/
It is supported by version 80 and beyond chromium based browsers. So, limited support right now, but depending on your use case, it could be useful.
Related
Slider working great here, but when in a smaller format on a phone as an example, the menu will not roll back up for other items or possibly not drop down for some dropdown items.
Saw one article "bootstrap.min.css, bootstrap.min,js, and ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js not resolving" but did not see anything there to help.
Answer was to use the code found at link http://docs.sitefinity.com/for-developers-avoid-conflicts-when-loading-multiple-versions-of-jquery
below wrapper and remove one of the references to "bootstrap.min.js".
I need to insert a google adsense square box in the middle of all articles on the site.
What is the best approach?
The site is in drupal, so I figures I can hook to the view node function. this way the ad won't be saved together with the article. does that make sense? If so, than the question is how do I ensure I won't have image on the other side of the ad (the ad is aligned to the left and should take 50% of the article width)?
should I be using a block? but how will I know to place the block in inside the block.
So in short, I really have no idea where to start to implement it... How is this thing implemented in all the news sites?
I'd approach it by implementing a custom input filter that would insert the AdSense code (or the AdSense module shortcode, if you want) into the processed text. Once you have that custom filter implemented, you'll have to enable it in the text format you're using for the content type.
For implementing a custom filter, take a look at filter_example here.
This solution is for Drupal 7. The solution which worked for me is that I used the adsense tags format and then used this format to show ads on the site. Note that this line doesnot need any js inclusion or script tags. You just need to enable the Adsense tags format(I mean shortcode). Actually I was getting Ads disabled for admin and for other users i was getting the empty ad with space occupied on page but nothing shown. After different tweaks and experiments I got the following code working for me
[adsense:336x280:XXXXXXXXXX]
2nd parameter is width x height
3rd parameter: XXXXXXXXXX denotes the google ad slot/id.
I hope this will help others.
Ata ul Mustafa
I need to insert a google adsense square box in the middle of all articles on the site. What is the best approach?
From my experience:
On some drupal sites I used simply node editor to put box with adsense into content. For websites with not many nodes its best solution because of:
1) Box perfect fits in rest of content - you can change it manually.
2) Total control of viewed boxes - images, flash, text adds etc.
Etc.
But for websites with many nodes, this solution looks like stupid suicide.
Better option will be change node.tpl file in your theme folder. But there is some trouble. In this file, you have $content variable, with contains all of content in this node. This situation gives you ability to put box up or down of this node. But no in the middle. Perhaps solution will be to divide $content into 2x variables which will contains a half of contents. But question is - how do to it? Or maybe while content from node is saved into database, then you can put some html code with adsense box? And search best position to put box by regular expressions? Or maybe change all of nodes by adding html box directly in database?
should I be using a block? but how will I know to place the block in
inside the block.
As I remember, you cannot put block inside another block.
I want to make a sort of repeating slideshow banner for my website, but i need some help on how to do it. The best example of what i want is on the play.com website, they have a banner that has 5 different slides, the site scrolls between them after X amount of time but the user can also click on one of the numbered buttons at the bottom of the banner to skip.
I'm thinking of doing this using HTML, CSS, JavaScript, AJAX and PHP. I have an Ajax script set up already linking to a php page that will at somepoint check through a database to get its content. But i want to output everything using lists lu and li.
So does anyone know of any tutorials or something i could use to get something like on play.com? play.com is more or less and exact match to what i want.
Thanks for the help.
You can use jQuery in combination with slideshow plugins. You don't have to do much by yourself. A plugin which does what you want can be found here:
http://slidesjs.com
You can also search Google for "jquery slideshow". This should return lots of pages with plugins.
I use http://jquery.malsup.com/cycle/ as it has a very basic fade but also lots of different animations if needed.
Unless you have a good reason for it, there's no need for you to create the slider yourself, there are tons of options already made (and tested).
I often use this two:
http://nivo.dev7studios.com/demos/
http://jquerytools.org/demos/scrollable/index.html
here is a really simple one that loops through any number of <img> elements placed inside a <div class="slideshow"> wrapper and it only uses a few lines of jQuery and css...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
hope this helps someone else
Can someone tell me how to write code that pushes the content of a finished webpage down half an inch or so, then loads an ad across the top of the page, like this example:
http://abcnews.go.com/International/hideouts-sacred-spaces-experts-baffled-mysterious-underground-chambers/story?id=14136379
(example may no longer be showing this ad/function)
The entire page loads, then gets pushed down, then the ad loads at the top of the page. My code for this would be at/near the bottom of my clients html.
The ad content will come from a different server.
The same code would ideally work with all/most finished websites instead of being specifically tailored for each one.
Thanks for any and all help.
I suppose you implement your ads in your HTML by using a static code (eg. when you're using Google Ads). When you put this code on top of your page, it'll show the ad on top of your page. Optionally, you can style it a bit so it's centered.
Since you load your ads from a different server, I don't see any reason why the HTML-code behind those ads is dynamic (I don't know if it is?). Your ad-provider will take care of showing the ads in a random-order.
If you'd looked at the source of the page you'd see this this is achieved using JavaScript, not PHP. If you want it to happen (seemingly) after the page loads you need to write some php to inculde the html/JavaScript/images whatever for the ad, then some JavaScript to dispay it once the page has finished loading. Or use AJAX to dynamically modify the DOM.
Check out the jQuery JavaScript framework.
I would prefer to use a front-end code like jquery or normal javascript, and prepend your ad to the body.
OR
If you want to do it with a server-side language. You can add the server variable just after the opening body tag, and populate the html to the variable via server-side code.
See my example:
Gray : body tag
Green : your website
Red : the ad section
If you don't have a wrapper container around your div, add one. And use the methods I mentioned above to prepend the ad to your site.
I have a webpage. On it there is a javascript warning to the users who have javascript disabled. This is in the body part of the html page, towards the top. In google this is what shows in the description!
How can I make this go to the bottom of the page to stop google using it as the descriptiuon?
It is in a class if that helps...
If you move the warning to the bottom of the code you can use absolute positioning (or fixed if you want it to scroll with the page) to have it display at the top of the page. This way it is not the first text that Google sees when it indexes the page. Along with that I would add in the meta description tag as Christopher McCann said.
Have you set a meta description tag? Do you have other content on the page?
You can't MAKE google choose what it displays as the description but it will usually use the meta description tag so make sure you have one set. It won't fix straight away - you will need to wait until Google re-crawls your website.