I am editing a site that the menu is using a JavaScript. I managed to have it working but the hover state is just showing in the wrong place.
Here is the link. If you click on "Gallery" it's the Media that gets highlighted so on the last 3 menu items. Help please.
Here is the JavaScript code:
$(document).ready(function(){
$('#menu .container').each(function(i){
if(i==0)
{
var m = 1;
}
else
{
var m = 2;
}
$(this).css('width',((m-1)*$(this).parent('li').height() + $(this).parent('li').width())).css('height',$(this).parent('li').height()).css('margin-left',-(m-1)*$(this).parent('li').height()).css('cursor','pointer');
if(cur_page!=i)
{
$(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top',$(this).parent('li').height()).css('left',-/*m**/($(this).parent('li').height()));
}
else
{
$(this).find('.slide').html('<img src="' + tpl_base + '/images/menu-slide-' + (i+1) + '.png" />').css('top','0px').css('left','0px');
}
$(this).find('.text').html('<img src="' + tpl_base + '/images/menu-title-' + (i+1) + '.png" />').css('margin-left',(m-1)*$(this).parent('li').height());
switch(i)
{
case 0: var a = url_base + '/bio';
break;
case 1: var a = url_base + '/blog';
break;
case 2: var a = url_base + '/gallery';
break;
case 3: var a = url_base + '/media';
break;
case 4: var a = url_base + '/contact';
break;
default: var a = url_base;
}
$(this).click(function(){
window.location = a;
});
var t = $(this).parent('li').height();
if(cur_page!=i)
{
$(this).hover(function(){
$(this).find('.slide').stop().animate({top:'0px',left:/*-(t*(m-1))*/0 + 'px'}, 200)
},function(){
$(this).find('.slide').stop().animate({top:t + 'px',left:-(t/**m*/) + 'px'}, 400)
});
}
});
});
The highlighting of the menu items appears to be done based on the variable cur_page which is being set incorrectly at some point in the code; here are the values as they sit now:
Home : cur_page = -1
Bio : cur_page = 0
Blog : cur_page = 1
Gallery : cur_page = 3 // Incorrect
Media : cur_page = 4 // Incorrect
I would check that this is being set correctly; good luck!
EDIT:
In the header of the Gallery page is this:
<script>
var url_base = "http://www.ryansemple.com";
var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
var cur_page = -1;
cur_page = 3;
</script>
Change it to this:
<script>
var url_base = "http://www.ryansemple.com";
var tpl_base = "http://www.ryansemple.com/wp-content/themes/semple2010";
var cur_page = 2;
</script>
A similar fix should take care of the remaining pages.
What is cur_page? I assuming that it's current page index and you have difference in calculation. Probably your index starts with 0 but cur_page starts from 1.
Related
I have the following code to implement a ticker for a column. However the ticker is working only in the first row and not on the 2nd row onwards. Can someone help me understand on where I'm wrong?
JS Code to buld the table:
tr.append("<td id='time_ticker'>" + data[i].priority + "</td>");
Js code to start the ticker:
function minsTick() {
var existing_priority = document.getElementById('time_ticker').innerHTML;
var tmp = existing_priority.split(" ");
var priority_time = tmp[0];
var unit = tmp[1];
var new_priority = priority_time - 1;
if (unit === "Mins") {
document.getElementById('time_ticker').innerHTML = new_priority + " " + unit;
}
}
Thanks is advance.
I think the problem might be that your first code will duplicate the 'time_ticker' id, and js is expecting the ids to be unique in page .Try:
tr.append("<td class='time_ticker'>" + data[i].priority + "</td>");
and
function minsTick() {
var existing_priority = document.getElementById('time_ticker').innerHTML;
var tmp = existing_priority.split(" ");
var priority_time = tmp[0];
var unit = tmp[1];
var new_priority = priority_time - 1;
if (unit === "Mins") {
document.getElementsByClassName('time_ticker').innerHTML = new_priority + " " + unit;
}
}
I am so close to getting this. Here's my code that is returning the correct url, but only when button is double-clicked. I only need one click to retrieve the image.
var origin = 'COMP';
var area = 'US';
var type = 'typeA';
var level = 'Xnay';
var time = '0';
var btn1 = document.getElementById("redbutton").winControl;
function change_area(new_area) {
area = new_area;
}
function change_type(new_type) {
type = new_type;
}
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
You try by adding
$(document).ready(function() { }); block
before the following line
$(btn1).click(function () {
Finally as,
$(document).ready(function() {
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
});
I have written a Jquery Pagination plugin that works great with just one instance of the plugin. When I try to use two instances, the first instance ignores its given options and uses the second instance's options. I know this because the two sections both start out with the defined items per page, but when you navigate to another 'page' in the pagination, it reverts to the second instance's itemsPerPage - 2.
My guess is the second time this plugin is called, it is overwriting $.pagination's options, so when either pagination goes to a new page, it uses the overwritten options.
Here's the plugin:
/* Jquery Pagination */
(function($){
$.pagination = {
defaultOptions : {
itemsPerPage : 5,
startPage : 1,
showNextPrev : true,
navigationPosition : 'before',
paginationClass : 'pagination',
paginationItemClass : 'paginationItem',
paginationItemActiveClass : 'active',
nextClass : 'next',
nextText : 'Next',
prevClass : 'prev',
prevText : 'Prev',
}
}
$.fn.extend({
pagination : function(newOptions){
var options = $.extend($.pagination.defaultOptions, newOptions),
itemsToPaginate = $(this),
itemsToPaginateContainer = itemsToPaginate.eq(0).parent(),
paginationWrapper = "<div class='" + options.paginationClass + "'></div>",
paginationControls = '',
pagination,
numberOfPages,
showPage = function(goToPage){
var page = (typeof goToPage === 'number') ? goToPage : goToPage.attr('href').replace('#page', ''),
itemRangeEnd = page * options.itemsPerPage
itemRangeStart = itemRangeEnd - options.itemsPerPage;
$( '.' + options.paginationItemClass, pagination).removeClass(options.paginationItemActiveClass);
if (typeof goToPage === 'number')
pagination.find('.' + options.paginationItemClass).eq(goToPage-1).addClass(options.paginationItemActiveClass);
else
goToPage.addClass(options.paginationItemActiveClass);
itemsToPaginate.hide().slice(itemRangeStart, itemRangeEnd).show();
},
createPagination = (function(){
// Add pagination element to DOM
switch(options.navigationPosition.toLowerCase()){
/*
// TODO: Create ability to insert pagination after or before & after
case 'both':
itemsToPaginateContainer.before(paginationWrapper);
itemsToPaginateContainer.after(paginationWrapper);
break;
case 'after':
itemsToPaginateContainer.after(paginationWrapper);
break;
*/
default:
itemsToPaginateContainer.before(paginationWrapper);
break;
}
// Selecting pagination element
pagination = itemsToPaginateContainer.siblings('.' + options.paginationClass);
// Count how many pages to make
numberOfPages = Math.ceil( itemsToPaginate.length / options.itemsPerPage );
// Insert controls into pagination element
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.prevClass + "'>" + options.prevText + "</a>";
for (var i = 1; i <= numberOfPages; i++) {
paginationControls += "<a href='#page" + i + "' class='" + options.paginationItemClass + "'>" + i + "</a>";
}
if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.nextClass + "'>" + options.nextText + "</a>";
(numberOfPages !== 1) ? pagination.html(paginationControls) : pagination.remove() ;
}()),
bindUIEvents = (function(){
pagination.find('.' + options.paginationItemClass + ':not(.' + options.nextClass + '):not(.' + options.prevClass + ')').on('click', function(e){
e.preventDefault();
showPage( $(this) );
});
pagination.find('.' + options.prevClass).on('click', function(){
var prevPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() - 1;
// console.log(prevPageIdx);
if(prevPageIdx < 1)
showPage(numberOfPages);
else
showPage(prevPageIdx);
});
pagination.find('.' + options.nextClass).on('click', function(){
var nextPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() + 1;
if(nextPageIdx > numberOfPages)
showPage(1);
else
showPage(nextPageIdx);
});
}());
showPage(options.startPage);
return this;
}
});
})(jQuery);
JSFiddle
Any idea why each instance of this plugin doesn't just use its own options? How would I need to structure a plugin to encapsulate and protect their own options? Thanks!
Change
var options = $.extend($.pagination.defaultOptions, newOptions),
To
var options = $.extend({}, $.pagination.defaultOptions, newOptions),
Demo
Reason is you are providing the target as defaultOption while using the syntax jQuery.extend( target [, object1 ] [, objectN ]
I have a few cascading dropdowns on the bottom of my php page. Each time a user selects an option from the dropdown the following function is called to add the value of that option to my url variables. Currently the page refreshes to the top each time which is a huge problem. Normally I would use something like onCLick="window.location='page.htm#bottom';" to refresh to the bottom of the page but the below function stops working when I add the #bottom. Can someone help me adjust this function or give me other ideas that will refresh to the bottom of the page when the function is done.
function reload5(form){
if(document.getElementById('fda1').checked) {
var fda = '1';
}else if(document.getElementById('fda0').checked) {
var fda = '0';
}
var val=form.category.options[form.category.options.selectedIndex].value;
var val2=form.subcat.options[form.subcat.options.selectedIndex].value;
var val3=form.subcat1.options[form.subcat1.options.selectedIndex].value;
var val4=form.subcat2.options[form.subcat2.options.selectedIndex].value;
var comp1=form.mname.options[form.mname.options.selectedIndex].text;
var itemnum=document.getElementById('item').value;
var desc=document.getElementById('desc').value;
var quan=document.getElementById('quan').value;
var list=document.getElementById('list').value;
var uom=form.uom.options[form.uom.options.selectedIndex].text;
self.location='add_products.php#bottom?fda=' + fda + '&desc=' + desc + '&quan=' + quan + '&list=' + list + '&uom=' + uom + '&item=' + itemnum + '&cat=' + val + '&cat2=' + val2 + '&cat3=' + val3 + '&cat4=' + val4 + '&comp=' + comp1 ;
}
So this doesn't work: self.location='add_products.php#bottom?fda=' + fda
But this does : self.location='add_products.php?fda=' + fda
Any idea where to put the #bottom?
The issue is that the hash must come after the query string at the end. See this article. Try this... (I also cleaned up the code)
function reload5(form){
var val=form.category.options[form.category.options.selectedIndex].value,
val2=form.subcat.options[form.subcat.options.selectedIndex].value,
val3=form.subcat1.options[form.subcat1.options.selectedIndex].value,
val4=form.subcat2.options[form.subcat2.options.selectedIndex].value,
comp1=form.mname.options[form.mname.options.selectedIndex].text,
itemnum=document.getElementById('item').value,
desc=document.getElementById('desc').value,
quan=document.getElementById('quan').value,
list=document.getElementById('list').value,
uom=form.uom.options[form.uom.options.selectedIndex].text,
fda;
if(document.getElementById('fda1').checked) {
fda = 1;
} else if(document.getElementById('fda0').checked) {
fda = 0;
} else {
fda = -1;
}
window.self.location.href = 'add_products.php?fda=' + fda + '&desc=' + desc + '&quan=' + quan + '&list=' + list + '&uom=' + uom + '&item=' + itemnum + '&cat=' + val + '&cat2=' + val2 + '&cat3=' + val3 + '&cat4=' + val4 + '&comp=' + comp1 + "#bottom";
}
What I don't understand is why you are not doing something with Ajax that would not cause the page to refresh at all.
I can't figure out why this script isn't working in IE7 and 8. It works fine in all other browsers, but for some reason, in IE7 and 8 this script is only firing the // thumbs hover bit, and not the // loading images bit (which is actually more important). Everything seems to be fine, does anyone have any ideas?
function featuredJS() {
$("[title]").attr("title", function(i, title) {
$(this).data("title", title).removeAttr("title");
});
// loading images
var last = "featured/01.jpg";
$("#thumbs a").click(function(event) {
event.preventDefault();
var position = $(this).attr("class");
var graphic = $(this).attr("href");
var title = $(this).attr("alt");
var description = $(this).data("title");
var currentMargin = $("#full-wrapper #full").css("marginLeft");
var currentWidth = $("#full-wrapper #full").css("width");
var transitionTest = currentMargin.replace("px", "") * 1;
if(last != graphic && ((transitionTest % 938) == 0 || transitionTest == 0)) {
$("#placeholder").before( "<div class='featured'><div class='description " + position + "'>" + "<h3>" + title + "</h3>" + "<p>" + description + "</p>" + "</div><img src=\"" + graphic + "\" /><div style='clear:both;'></div></div>" );
$("#full-wrapper #full").animate({
marginLeft: "-=938px"
}, 500);
$("#full-wrapper #full").css("width","+=938px");
last = graphic;
};
});
// thumbs hover
$("#thumbs .thumb").hover(
function () {
$(this).find(".red-bar").animate({height:"72px"},{queue:false,duration:500});
},
function () {
$(this).find(".red-bar").animate({height:"3px"},{queue:false,duration:500});
}
);
};
Demo page at http://www.weblinxinc.com/beta/welex/demo/
Your problem is caused by not having a margin set to begin with. transitionTest then becomes NaN because the style is auto, not 0px like you're expecting. Consider trying this instead:
var transitionTest = parseInt("0"+currentMargin,10);
This will trim off the "px" for you, as well as handle the case where the margin is a keyword.