I have a website that has merged with another. It is a high ranking website so instead of using a redirect or similar I would like to keep the website online as is so that it does not affect SEO.
I want it so that when users visit the website it appears grayed out and a central box is shown with a message saying that the website has moved to www.newsite.com and they are not able to click any buttons etc. on the page.
Is it possible using jQuery or similar?
This is possible with jQuery modal, but to be quite honest your best bet really is to issue a permanent redirect (301) to the new site. You can likewise go to each of the major search engines and use their webmaster tools to indicate the site has moved. Your SEO ranking might dip briefly but the search engines really do recognize the fact that sites and content move these days, and the ranking won't be permanently affected.
You could do this however you like. JavaScript is probably not needed here. Create a simple modal, and style it in such a way that it looks how you have envisioned.
There are jQuery plugins to do this kind of thing, but honestly that's going to be more work to hook up and create more overhead than you would just making your own.
If you need some CSS help to accomplish this, let me know and I'll update my answer.
You can hide Everything in body and append a div and style it like an modal or something as you like
$(document).ready(function(){
node = $("<div id='modal'>Site has been Moved moved etc.. </div>")
$("body").append(node);
$("body *").not("modal").hide();
});
css
#modal{
/*style modal here */
}
Doing what you say will likely damage the SEO, however is possible with some simple css an jquery as long as the user has scripting active. CSS and HTML can achieve the majority of what you want without the need for Jquery or scripting.
A properly implemented 301 redirect will ensure google maps across and acknowledges the movements of pages from one domain to another. BUt you need to do this properly.
Related
So this is more a design/tooling question (no code to show)
The Idea:
I have an idea for a web app that I'd like to implement using either React/Angular depending on the outcome of this discussion really. The idea is that I want to be able to bundle up my web application and embed it in any website with as little code as possible. The end result for the website it's embedded on would be a new 'widget style' button hovering in the corner which when clicked opened up my new React/Angular application in a pop up or layover modal style window.
To be clear, I want to, if possible provide the clients host website with as little code as possible such as:
<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>
This would then leave them with a widget style button that when clicked opened my app as a layover
The How:
Now I know there are probably a few ways of implementing this. I come from an Angular development background as a full stack dev so embedding apps within websites would be a new concept to me. I guess the outcome I want is similar to that of a chat widget application on a website.I'm struggling to find online the best solution or toolset for the job.
Web components seem to have popped up quite a lot. This would result in me having to provide the website with the tag and the new html element but could this then add a widget style button which triggered the application popup. I've also read that React/Angular bundle sizes may be too much for web components, even in smaller apps, so something like preact may be preferred? Again the same question above stands. This youtube video explains preact/react web components and wonder if its the best option - https://www.youtube.com/watch?v=PUGDzA1uP-Y&t=545s
iFrames are definitely an option if I wanted to simply mount my application with any other website. That said its not really what I'm after, as although I want the contained app, I also want to be able to add this custom widget style button to the host website, without having to edit the website directly.
UMD Libraries - again something else I've come accross but this is the most unclear, and how they differ or would benefit my specific scenario compared to web-components.Now I may be barking up the wrong tree completely, and if so could you kind people please point me in the right direction of what I should be looking at.
I may also need to consider 2 apps, one for rendering a button that loaded quickly annd then facilitated the popup / modal type layover, and then one which loaded up my application with one of the 3 methods mentioned above?
THANKYOU IN ADVANCE! :)
I was wondering if using Lightbox all over the site would be a smart idea.
We are developing an eCommerce site and the idea is to keep the user on the main page all the time and show all the content (Product Page, About us etc) in a Lightbox way.
I understand that in order to use Lightbox you'll need Prototype/JavaScript which are widely supported at most browsers, I'm also aware that Ligthbox on mobile is not really fun but we are going to create a mobile version anyhow, A few Qs:
Do you think Lightbox might be heavy somehow? will it reduce site performance?
Do you think there are going to be big compability issues?
Any other thoughts why that not such a good idea? Again, the main idea is to keep the user at the main page while he can browse 'less important'.
Thanks in advance.
I think it's not a good idea to use lightbox massively to show relevant content for many reason
Accessibility: you cannot rely only on javascript to access the information so you need to put much more effort to develop with progressive enhancement. How if I navigate products through the browser history?
SEO: have you thought how to make your products retrievable by search engines? To make dynamic content indexable you will need again more extra effort. Consider also the possibility of being penalized for hidden contents on the page.
Usability: How would you deal with multiple devices and screen resolution? What if you show the image product in a lightbox and then your customer ask to also show the zoom images in a lightbox too? Will you open nested lightbox?
Social Network : "like" and "+1" are common functions on almost every modern e-commerce: but these actions can be performed only on a single URL, so if your products are not associated to a specific url (1 to 1 relation) you won't be able to share a specific item.
So, It's better to avoid all these complications
Use instead lightbox for giving alerts, show modal window and tell the user about the result of some server operation (e.g. Login/logout messages, alert the end of stock for an item during checkout...) and, in general, everywhere it's better not to completely change or break the navigation flow (e.g. registration, checkout,...), but definitely avoid to organize the entire site in lightboxes.
If you are developing an e-commerce site, then its not a good idea to use lightbox style ajax for loading all pages, because then search engines will not be able to index your products and display to people on search results.
In the past, I've used Fancybox over Lightbox mainly because I found it to be more flexible for my needs.
I too have created a online store using Fancybox with embedded popups to give the user more information on a popup.
What I would say is that to ensure page performance is not hindered, do not render a Fancybox popup through a hidden div on the page. If the hidden div contains a lot of images and content, this will cause some overhead.
The way I've used Fancybox is by loading an external page as its content source:
$("#product-info").fancybox({
titleShow : false,
width: 500,
height: 600,
autoDimensions: false,
overlayOpacity: 0.6,
href: 'product-info.aspx?ID=9' // External page source
});
I think just use a Fancybox/lightbox with caution. Only add basic product content. Keep the detailed for the product page itself. This will help Google searches (as other people have commented).
I agree with all of F.Calderan's points except maybe the last. I think there is a common use case in the "Quick View" seen on many clothing sites that could work for you. It provides a similar experience to the one you describe while not replacing all the benefits of having multiple pages.
See Old Navy for an example.
I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?
Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.
You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/
I'm wondering if doing this along in JQuery would be stable enough? or if it would need to be done in ruby/rails first?
Either way I don't want a butt load of messages being loaded when a user enters the page where they're displayed. What I want is limit results to a specific amount then either have the page load more results when a user scrolls down or have them click a "load more" button similar to how it's done on both facebook and googleplus.
Currently I have comments scrolling down my page for miles and would like to use jQuery to take control of this. I'm guessing since each comment is stored in a div / class I could use this as a way of recognising what a comment is.
Anyway trying to figure out the best way to approach this I'd really appreciate some advice and maybe links to some good tutorials on how to pull this off.
I agree with the Ohgodwhy's comment - use will_paginate in Rails.
However, I'd also look at how to do scroll-down pagination, rather than page number links, depending on your design. I like Ryan Bates's screencast on this topic: http://railscasts.com/episodes/174-pagination-with-ajax
He also has a video for doing it without will_paginate: http://railscasts.com/episodes/114-endless-page (the newer, revised version of this requires a subscription).
Now I'm able to create joomla templates (even this last one that is giving me some headache, but the problem is with IE6 and the css...) and then comes the question how do I create a drop-down menu without installing a module and/or component?
actually that is not only my problem! there are a lot of people asking the same thing all over the internet... for the time being, I have no experience with javascript, and will take me some time to get used to CSS before a go deeper into the matrix of web apps and so on...
so, is there and easy to implement drop-down menu "framework" that will work with the joomla menu system to create a drop-down menu?
because I'm not willing to create a flash menu at all, it is fancy on user side, bandwidth, loading time, and finally it's not dynamic!
Just need to say something else! I love this website, I'm a beginner, but not long enought I'll be giving some answers! (gave 2 already about centralization on CSS and IE6 text-aline:center; issue!)
Well you shoud try to use an extension, it's easy and a way better! there are tons of good dropdown menus for joomla why not simply use one of them?
RokNavMenu is a really good extension. They have drop-down and override support as well as cross browser compatibility out of the box. I would install it and check it out.
RokNavMenu in the Joomla Extensions Directory