Whats the easiest way to enable my page title to update per content div areas it's on?
I have a vertical scrolling website and would like the page title to change when the user navs to each content area (The content areas are within div & article)
Essentially, I'm trying to keep 'Orginal Site Title | + Home/About etc'
I'm thinking it's something I'd have to call with php to remember a set title attribute per div link? Any suggestions on setting this up (If possible)
I think you should take a look at the Viewport plugin. This way you have 4 selectors you can use:
$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")
Now you could do something like this:
//Get the id of element(div) that is currently in view
var inview = $('div:in-viewport:first').attr('id');
//Define titles
if (inview == 'home'){
var newtitle = 'Home'
} else if (inview == 'about') {
var newtitle = 'About us'
}
//Lets rename the page title
document.title = 'Orginal Site Title |' + newtitle;
The above code should now always be called when you scroll ($(window).scroll(function () { ... });) to update page title according to the div that is currently in view.
This is just a generic example and it can be completely changed to your needs. I hope it helps in some way.
You might be able to do this by writing a plugin based on the scrollspy plugin that comes as part of twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#scrollspy
You could tweak it so rather than setting a class on the target it updates the title with whatever the content is in the current viewable panel
Related
I have a question regarding e-commerce websites. Lets assume there is an e-commerce website that sells products for women, men, kids. For each of these categories it sells clothes, shoes ---etc. When a user clicks on women or men or whatever category, the user should be directed to a page showing the list of products corresponding to that category. Lets assume that the website have the same layout. For example the navbars, the squares where products will be displayed are the same. the only difference is the content it self. My question does large e-commerce websites have a separate html file for each product or they have some a template html file where the design and layout is fixed and based on link clicked the content of html is changed. Having a separate html file would be very cumbersome. If having a template html file is the case, how does the name of the link in browser change when different products are clicked is it related to .htaccess.
Thanks.
Yes .htaccess is important in this case. Try to learn how to parse url, and make some simple MVC applications.
There are many methods to doing this. The main answer to your question is that you need to parse the url. I'll go over a couple here.
1) PHP looks like it would be the easiest solution if you're connecting to a mysql database with products. You can create a php file with the categories as parameters, so each link could look like products.php?category=shoes
Then you can parse that url with $_GET in your code.
$category = $_GET['category'];
Then, in your php file, you can display specific content based on the category like so:
if ($_GET['category'] = 'shoes'){
//then enter your logic here
}
elseif ($_GET['category'] = 'books'){
//then enter your logic here
}
Here's some more info on the PHP GET: http://w3schools.sinsixx.com/php/php_get.asp.htm
You can do this via javascript by parsing the href
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var dynamicContent = getParameterByName('dc');
and then writing the logic to correctly create elements that fit your requirements through javascript.
More details: http://jennamolby.com/how-to-display-dynamic-content-on-a-page-using-url-parameters/
This should help you move forward to understanding how to achieve your concept hopefully!
Ello there,
First of all thanks for any help, it's appreciated.
What I am trying to do is change my website's logo on scroll, but I am trying to accomplish this through my theme options, and I am not looking to use CSS to hide/show a class which uses the background property to display the logo.
Instead in my header.php I am echoing a function which renders the logo dependent on what "header option" a user has selected.
Here is the PHP I have which works on a switch inside my admin panel, so if a user selects "Yes" and they would like to change the logo when the header is sticky then they have an option to upload an extra logo (this all works fine without checking if that css class exists):
$site_logo_change_scroll_switch = notorious_options('site_logo_change_scroll_switch');
if ( $site_logo_change_scroll_switch == true && class_exists('scrolled-nt') ) {
$logo_url = notorious_options('site_logo_change_scroll', false, 'url');
}
return $logo_url;
This code is all working fine, except for checking if the CSS class "scrolled-nt" exists to only display this logo on scroll. I am using Jquery to append this class to my logo:
jQuery(window).scroll(function(){
var fromTopPx = 5;
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('.nt-logo').addClass('scrolled-nt');
}else{
jQuery('.nt-logo').removeClass('scrolled-nt');
}
});
I can see on my website, that when I scroll down the extra CSS class "scrolled-nt" is added onto my img src, but the logo is not showing at all after or before scroll, with checking if this CSS class exists (in my php above).
Any idea what I'm doing wrong here?
I hope I explained this properly, and maybe it is a simple fix, but I am fairly new to JS/PHP and quickly getting an addiction for it.
Any helps appreciated, thanks!
I have created a gallery for my website and I decided to use jQuery infinite scroll plugin (ex: facebook wall) on my gallery.
All datas are coming from PHP MyAdmin database. My question is, how to get datas to infinite scroll from database? My all codes are working without any issue.
Database: gallery
Table structure for table: posts
index.php:
<?php
include ("connect_database.php");
$select_post = "SELECT * FROM posts ORDER BY rand() LIMIT 5";
$run_posts = mysql_query($select_post);
while ($row=mysql_fetch_array($run_posts)) {
$post_id = $row['post_id'];
$post_date = $row['post_date']; //.etc here
?>
<div id="container">
<!-- gallery codes here and five thumbnails are randomly loading on homepage -->
</div>
<!--Next page for INFINITE SCROLL-->
<nav id="page-nav">
<!--please check script.js-->
</nav>
Next page is loading without any issue when I add a html or php file in <nav> tags.But I need to create a new php/html file for each loads.Can I have an idea to load next 5 thumbnails without creating a new file.I need to get next five thumbnails to infinite scroll from database.
script.js:
var $container = $('#container');
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
}
);
If you want to have 5 random posts load with every scroll, the you do not need to differentiate one request from the other (ex. page number).
Although I don't see this as a viable solution because you will end up with duplicate entries (you decide if this is a problem or not), you can use the 'path' option to call the next page like the example below.
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
path: function(index){
return "index.php?page=" + index;
}
}
);
Then of course you will have to tweak your index.php file to handle the page parameter correctly. Yet, again, having the random results, you will not need a 'page' parameter but rather always return "index.php" inside the path function and things should work fine.
I set my title of the page like this in the blade view template:
#section('title', 'Example.com - Welcome to Example.com for all your needs')
This is working well. Now I want to know how can I access/print the current page title in the body part?
I mean for getting the current URL, we can use Request::url(). Is there a way that I can get the current page title?
I don't know of a way to do this in Laravel, but this is easily accomplished in Javascript/JQuery:
$(document).ready(function(){
console.log($("title").text());
});
Will print the title of the current page to the console. You can assign this value to an element by targeting it's id $("#id_of_element") or class $(".class_of_elemnt") and setting the text to the title's text:
$("#id_of_element").text($("title").text());
Hope that helps!
I think it's not a good idea to set the page title with hard code in layout file.
one of the best ways is to have a default page title in layout and override it in every view page.
just like below :
layout title :: {{ isset($title) ? $title : 'page title' }}
You can print your page title using
#yield('title)
wherever you want.
I have the problem that I am using a theme where the navigation is simply 'scrolling' to a given part (eg. #contact) when pressed. However, I have implemented some seperate subpages that exits this scrollable page and thus renders the navigation ineffective.
My question is, how can I change the destination of my links or maybe change the menu entirely when users are on these subpages?
I should clarify that all the pages that need 'the new' navigation use a different page template called full_width.php. But since it is using an include header function I can't just replace the navigation.
Thank you for your time!
Here is simple solution based on templates.
if ( is_page_template('full_width.php') ) {
//menu for full width page
} else {
// Returns false when 'full_width.php' is not being used.
wp_nav_menu( $args );//read for args in codex to make menu you want.
}