Angular removing hash from Urls - javascript

Long story short:
Our website page got moved from a single page style to wordpress style by our designer, which has sections scrolling to which change hash in the URL. Since our earlier page was written in angularJS, we ported the whole angular code to one of the section, rest of the sections just praise our website.
Works fine!
But the issue occurs when a user tries to open the section directly from other page using hash. Eg.
http://www.example.com/#/section4
The angular removes this has from the url and renders the page without scrolled to the mentioned section. This I verified, by removing angular and trying to open static html page.
Any ideas why this might be happening.
If any confusion in my question, please comment. I am pretty confused myself at the moment :)
Edit 1:
The usual flow of pages is the page scrolls to the section which has name same as hashtag.
I want to have this functionality in my angular application.
Don't want to remove the hashtag.

You should have a look at this, if you enable html5mode you should be able to use normal hash navigation.

Hi There Just Include this code into your Config File..
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

Related

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

changing active class in twitter bootstrap to the current page that user clicks on in the navigation bar

I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.
I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.
In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default.
I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.
I think I need to add some javascript to get this working. Or maybe I can get this working without javascript?
What do I do? Please help...
If you can get an example up on jsfiddle, that would be great too.
What I need help with specifically:
1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).
2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.
3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.
4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?
5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.
Ok.
download http://flesler.blogspot.com/
download http://github.com/davist11/jQuery-One-Page-Nav
Call js
jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>
});
Add id="top-nav" to your nav

Problems in implementing Disqus plugin due to jQuery issues

I am working on a blog website at http://d361.azurewebsites.net/Blog. I have used a template for full page flip from http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layou which uses javascript and jquery, other than the obvious.
I have 2 problems.
I need disqus plugin on every article of the blog. But since the whole website is basically one single webpage, I have not been able to implement it. Further anchor tags are not working.
Currently the disqus plugin is working in case of the first article only.
I am also using social sharing buttons on the site. Again, they share only the mail website link, i.e d361.azurewebsites.net/Blog and not the actual articles. I tried to use anchor tags but it is not working.
Kindly help me out here. As you must have already known, I dnt know much beyond html and css.
Disqus won't work with single-page applications out of the box, you have to use our AJAX protocol to reload the thread with the new information. The process is documented here: http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
Whenever the page content is changing, you would call DISQUS.reset like this:
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "new_disqus_identifier";
this.page.url = "http://example.com/#!new-url";
}
});

SEO Problems while using Pagination technique

i created a video photo library / video library, there i have many rows where i places the icons against video or Image, & because of the length of the page i used the jquery pagination technique, Now i have 2 problems (1) SEO Problem, if anyone search any data that i have on the other than the 1st page, it shows in search engine & when user click on that link it land on the 1st page, not on the relevant page, (2) when user click on the next page, the view will stile on the pagination i want it goes on the top of the page or top of the table,
Link of that page "http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=1"
any one can help me in this situation?
Thanks In Advance.
Have a read of Making Ajax Applications Crawlable as written by google.
In brief: Instead of www.example.com/ajax.html#key=value use www.example.com/ajax.html#!key=value as your scheme.
Then respond appropriately to requests in this format: www.example.com/ajax.html?_escaped_fragment_=key=value
To solve your scrolling issue, you'll want to add just one line of code to pager.showPage(). To scroll to the top of the table, add this line:
document.getElementById(tableName).scrollIntoView();
Or, to scroll to the top of the page, add this line:
scrollTo(0, 0);
For the SEO work, follow wombleton's advice.
See that your url container fragement #pg=1 by default when you point to such link it will move your view there. As an workaround you can write window.scroll(0,0); on your page to always be on top. For your SEO problem it seems like a usability problem which has to be resolved using some design changes. Also doesnot your search results give the url as
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=4
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=3
i mean the page numbers.

Categories