I've a problem that I'm not really sure if can be solved:
I want to have a modal that pops up in sites of my clients. If a user goes to a client page, after some second, my pop up will appear.
I have built my modal pop up using bootstrap, jquery and some other javascript.
The problem is: there is a way to avoid the inclusion of my css in my clients' pages? This is because, maybe, one of them does not use bootstrap and using it will change the presentation of his page.
So, there is a way to include only a javascript that calls my server to get the information it needs (css etc...)?
I thought that I could include my code in an Iframe, but there is a way to have the pop up display in the parent window?
Thank you very much!
I think I might have solved the problem with a workaround. I use a pop up that takes data from an iframe. My clients need only to include the javascript code for the pop up and nothing more; everything else will stay on my server and will be retrived once the pop up "makes" the call.
Related
Many aspects of my site are dynamic. I am using jquery.
I have a div which once the DOM is ready is populated using load().
Then if a button is clicked, using load() once again, this value is replaced by another value.
This kind of setup is common across my site. My homepage is essentially lots of dynamically loaded, refreshed, and changeable content.
What are the repercussions of this for SEO?
Ive seen sites where each page is loaded using load() and then displayed using the animation functions... It looks awesome !
People have posed this question before, but noone has answered it properly.
So any ideas? JQUERY AND SEO??
Thanks
EDIT
Very interesting points. I dont want to overdo my site with jaascript.. just where neccesary to make it look good - my homepage however is one place of concern.
So when the DOM is readY, it loads content into a div. On clicking a tab, this content is changed. I.E No JS, No content.
The beauty here for me is that, there is no duplicated code. Is the suggestion here that i should simply 'print' some default content, then have the tabs link to pages (with the same content) if JS is disabled. I.E sacrifice a little duplicate code for SEO?
As far as degrading goes, my only other place of concern is tabs on the same page.. I have 3 divs, all containing content. On this page two divs are hidden until a tab is clicked. I used this method first before i started playing with JS. Would it perhaps be best to load() these tabs, then have the tab buttons link to where the content is pulled from?
Thanks
None of the content loaded via JavaScript will be crawled.
The common and correct approach is to use Progressive Enhancement: all links should be normal <a href="..."> to actual pages so that your site "makes sense" to a search spider; and the click() event overrides the normal functionality with load() so normal users with JavaScript enabled will see the "enhanced" version of your site.
If your content is navigable when JavaScript is turned off, you'll be a good ways toward being visible to search engines.
Note that search engine crawlers won't be submitting any forms on your site, so if you have any or elements that are meant to be navigating between your site's content pages, that content is not navigable by search engines.
Here is a guidelines how to make Google to crawl content loaded with ajax: http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I use jquery load() asynchronous page load. It greatly improves user experience, but not seo-friendly. Here's the only solution I have found so far:
On first load I do not use jquery load() and try to write cookie with javascript.document.cookie = 'checkjs=on';
On next page load if php script finds this cookie it means that javascript is enabled and jquery load() can be used. If there's no such cookie then javascript is off (probably spider came), so jquery load() is not used.
if (!$_COOKIE['checkjs'] || $_COOKIE['checkjs']!='on'){echo 'js is off, hello Google!'; } else {echo 'js is on, can use jquery load';}
This way I can be sure that most of users can benefit from asynchronous page blocks load, exept for the very first load. And spiders get all content too.
In your case you could just load the same page with new parameter that makes another tab active. Spider is gonna be happy.
We are new to Umbraco and coding within it, so I thank you in advance for your patience and assistance.
In short, we created a 'test' page utilizing a colorbox pop-up to display a form. It works perfectly in the test page.
When trying to integrate the code into Umbraco, when the "Request Info" button is clicked, the form opens in a full page, and the colorbox does not display.
I would appreciate any assistance that you could provide.
Test link (working):
http://online.saintleo.edu/Colorbox/Untitled-1.html
Example of a page where the "Request Info" button (yellow on right) opens full page, and NOT colorbox:
http://online.saintleo.edu/academics/masters-programs/master-of-accounting-(macc).aspx
I've spent the entire weekend trying to find the solution, hoping to get this resolved ASAP.
Thank you in advance, I appreciate your time and assistance.
This looks like a problem with how you have implemented your script in Umbraco. Just looking through Chrome's browser inspector, I can see that your script is failing to find the colorbox objects which means that something is prevent the library from being available. This is usually because a dependent javascript library has failed.
Looking at your source code, you are loading all your jQuery libraries at the bottom of your page. This is good practice, but you have placed your a second jQuery file reference, your colorbox file references and the custom colorbox code in the head of the page.
There are several things you will need to do:
Remove the jQuery reference from the head of the page;
Move the colorbox file references to the bottom of the page, after all the other javascript file references. You can leave the colorbox CSS file reference in the head.
Move the custom colorbox code to after all the other javascript file references. I usually place this kind of code in a separate file.
Depending on your Umbraco implementation:
If you are using masterpages, use a ContentPlaceholder to allow templates to drop javascript file references into the bottom of the page;
If you are using MVC views, use a footer section to do the same
i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me
I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.
Take a look at jQuery's fancybox -> Fancy Box
well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/
I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.
A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.
Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?
Opinions?
It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?
Using AJAX to load entire pages is ugly for a couple of reasons, including:
It breaks the URLs (can be worked around but requires extra work)
It's hard for search engines to crawl your site
It breaks some GUI elements in the browser, such as loading visualisations
looks like you can use jquery load function http://docs.jquery.com/Ajax/load