Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by cpugeek

  1. I'm trying to create a dropdown menu effect here http://cbd-alpha.com/ideal/But I'm stuck with how to get the menu items under the "about" menu item to stack vertically like a standard dropdown. Here's the CSS: #mainNav { margin: 82px 0 0 160px;}#mainNav ul {list-style-type: none;padding-top: 8px;}#mainNav li { float: left; padding-left: 21px;}#mainNav li:first-child { padding-left: 80px; background: none;}#mainNav a { text-decoration: none; padding: 0px 10px; font: normal 14px "ITCAvantGarde", Helvetica, Arial, sans-serif; color: #FFF;}#mainNav ul ul { display: none;}#mainNav ul ul li { padding-left: 0 !important; z-index: 999 !important;}#mainNav ul ul ul { }#mainNav ul ul a { }#mainNav li:hover > a,#mainNav ul ul :hover > a { color: #afc2d1;}#mainNav ul ul a:hover { }#mainNav ul li:hover > ul { display: block;} And here's the css of a similar menu: #mainNav { margin: 0 auto; position: relative; width: 1000px; z-index: 101; } #mainNav ul { border-left: 1px solid #CCCCCC; border-right: 1px solid #FFFFFF; float: left; height: 37px; list-style: none outside none; margin: 0 auto; padding-left: 0; position: relative; z-index: 100; } #mainNav li { border-left: 1px solid #FFFFFF; border-right: 1px solid #CCCCCC; float: left; position: relative; } #mainNav a { color: #8D8C8C; display: block; font: 18px/38px "GothamBoldRegular",Helvetica,Arial,sans-serif; height: 37px; padding: 0 11px; text-decoration: none; text-transform: uppercase; } #mainNav ul ul { border: medium none; display: none; float: left; left: 0; position: absolute; top: 38px; width: 260px; z-index: 99; } #mainNav ul ul li { background: url("images/nav_bg_hover.png") repeat scroll 0 0 transparent; border: medium none !important; float: none; padding: 0 !important; } #mainNav ul ul ul { left: 100%; top: 0; } #mainNav ul ul a { background-image: none !important; border-bottom: 1px dotted #FFFFFF; color: #FFFFFF; font-weight: normal; height: auto; line-height: normal; overflow: hidden; padding: 10px !important; position: relative; text-transform: capitalize; width: 240px; z-index: 99; } #mainNav li:hover { color: #6A99C8; } #mainNav li:hover { background: url("images/nav_a_hover.jpg") repeat-x scroll center bottom transparent; } #mainNav li:hover li { color: #FFFFFF; } #mainNav ul ul li:hover a { background: url("images/nav_bg_hover.png") repeat scroll 0 0 #56A1D5 !important; } #mainNav ul li:hover > ul { display: block; } How do I stack them vertically?
  2. Hello, it's been a while since I've posted in this forum, but I'm doing what I can to get a pre-existing jQuery plugin to work, and I'm currently pulling out all of my hair. The plugin itself works, I'm just unsure how to implement it. After including it, what html would I use to create the slider? A live version of the script can be viewed here: http://wptitans.com/majestics/ // JavaScript DocumentjQuery(function($){ $.fn.featureslider = function(options){ /* ================================================================================================ *//* ======================================== Plugin Options ======================================== *//* ================================================================================================ */var defaults = { time:4000, width:600, height:400, effect:'none', autoplay:false, listControls:true, callback:function(){ } }; var options = $.extend(defaults, options);/* ================================================================================================ *//* ==================================== Variables & Precaching ==================================== *//* ================================================================================================ */ return this.each(function() { var root = $(this).addClass('mainslider'); var parent = root.parent(); var li = root.find("li"); var images = li.find("img"); var pos,random_no,timer,image_timer,counter,arr,wait,index,block,w,h,src,parent,im,override=false,in_animation = false,controls,canvas,html5_flag=false,imageData,canvas,context,root_parent; var current = li.eq(1).toggleClass('active'),prev = li.first().addClass("reset"); var bool = true,first_bool = true; root.css({ width: options.width, height: options.height }); li.first().find("div.description").css("display","block"); li.first().fadeIn('slow'); current.hide(); if(options.listControls==true) appendControls(); /* ================================================================================================ *//* ======================================== Switcher Module ======================================= *//* ================================================================================================ */ function switcher() { if(current.prev().length>0) prev = current.prev(); else prev = li.last(); prev.removeClass("reset"); current.toggleClass("active reset"); if(current.next().length>0) // setting the next slide current = current.next(); else current = li.first(); current.hide(); current.addClass("active"); options.callback(); } /* ================================================================================================ *//* ================================= Effects Switching & Ending =================================== *//* ================================================================================================ */ function endeffect(image){ if(options.listControls==true) { controls.removeClass("control_active"); controls.eq(current.index()).addClass("control_active"); } clearInterval(timer); setTimeout(function(){ in_animation = false; if(override==false) // Return if manually triggered image_timer = setTimeout(function() { current.find("div.description").fadeOut('fast'); switcher(); effects(); },(options.time-800)); },1000); };function effects(){ if(li.is(":animated"))return; if(bool==true) { li.first().find("div.description").hide(); bool=false; first_bool = false; } switch(0) { case 0: current.find("div.description").fadeIn('normal'); current.fadeIn("slow",function(){ endeffect($(this)); });break; }}/* ================================================================================================ *//* ======================================== Control Options ======================================= *//* ================================================================================================ */ function appendControls() { var str = "<ul class='controls'>"; for(var i=0;i<li.length;i++) str = str + "<li>"+(i+1)+"</li>"; str = str+"</ul>"; root.after(str); controls = parent.find(".controls li"); controls.first().addClass("control_active"); controls.parent().css("left", 980/2 + 20 + controls.parent().width()/2 ) controls.bind({ click:function(){ setImage($(this).index()); }, mouseover:function(){ $(this).toggleClass("control_hover"); }, mouseout:function(){ $(this).toggleClass("control_hover"); } }); }/* ================================================================================================ *//* ======================================== Image Settings ======================================== *//* ================================================================================================ */ function setImage(index){ if(first_bool==true) { if(in_animation==true||current.index()-1==index) return; } else if(in_animation==true||current.index()==index) return; li.removeClass("reset active"); current.find("div.description").hide(); clearTimeout(image_timer); // Manual Override... if(first_bool==true) li.first().addClass("reset"); current.addClass("reset"); prev = current; current = li.eq(index).addClass("active"); override = true; effects(); } if(options.autoplay==true) image_timer = setTimeout(function() { effects(); },options.time); // Starting the Slideshow }); }; });
  3. I'm currently developing an online web community, and I was thinking of allowing the base of the website to be extensible by developers. The site is built on the CodeIgniter and Zend php frameworks. I was wondering what the best way to allow these extensions to be made would be? Would it be better to use the frameworks' plugin capabilities or what? Can someone help point me in the right direction?Any and All help is appreciated! :]
  4. cpugeek

    PHP + CSS

    What I'm aiming for is to use links in a gallery, clicking on one of the images will cause the background to change to the selected image.
  5. cpugeek

    PHP + CSS

    You think this would work with links? How would I do that? D:
  6. cpugeek

    PHP + CSS

    I'm currently trying to make a style changer specifically for my background images. I currently have a working style changer but it requires a style sheet for each background, and I plan to add A LOT of background choices, which would be TOO MANY style sheets. So I'm trying to figure out how to make it more dynamic using a MySql db to store all of the image paths [cookies for the preferred bg path]. I'm not even sure how I would do this, which I know sounds nooby, but all of my approaches don't seem to work.Any and All help is appreciated. [:
  7. I'm been trying to dive into the SoundCloud API using PHP + OAuth, but I'm so confused on where to start.. I have already set up an authentication system and base application using the codeigniter php framework, and I'm curious about how to store the token [i think] so they only have to authorize the site once for SoundCloud. Any and All help is appreciated.
  8. I'm currently trying to add a rearrangeable layout function to my website, and all the examples I'm finding use a cookie which won't matter if logging in on a different device. I have the animations completed, but nothing that remembers the layout. I would think the other best option would be to remember it in a mysql database. Anyone know of a solution or have any ideas?
  9. I don't know how that got set! >< Didn't even notice it, but now it works, thanks!Edit: Just checked and it's not in the source document..
  10. I've been playing around with my css lately and now I've apparently done something to hide the checkbox, using firebug I can't even figure it out. Can someone put in their 2 cents? http://ravecity.tv/auth/login
  11. I finally got it working, it was an issue of how the array was set up, but now it's working fine. I'll post my fix for others later today.
  12. I'm currently trying to create a JSON feed for FullCalendar using CI. I currently have a working example, but the output doesn't get imported into the calendar. Anyone have any ideas? I've been stuck on this for almost 3 days now..In my controller function json() { $data['events'] = $this->events_model->jsonEvents(); header("Content-Type: application/json"); $this->load->view('json', $data); } In my model function jsonEvents (){ $this->db->order_by('startDate', 'desc'); $this->db->limit(10); return $this->db->get('calendar');} } In my view <?php foreach($events->result() as $entry): ?> <?php $jsonevents = array( 'id' => $entry->eventID, 'title' => $entry->eventTitle, 'start' => $entry->startDate, 'allDay' => false, 'end' => $entry->endDate ); echo json_encode($jsonevents); ?> <?php endforeach; ?> The corresponding JSON {"id":"24242","title":"sdfsdfsdfsdf","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"} {"id":"1234567890","title":"Test","start":"2011-05-05 13:00:53","allDay":false,"end":"2011-05-06 17:00:19"} The calendar setup //Fullcalendar $('#calendar').fullCalendar({ firstDay:'1', weekMode:'liquid', aspectRatio: '1.5', theme:true, selectable:true, editable:true, draggable:true, droppable:true, timeFormat:'H:mm', axisFormat:'H:mm', columnFormat:{ month: 'ddd', // Mon week: 'ddd dS', // Mon 9/7 day: 'dddd dS MMMM' // Monday 9/7 }, titleFormat:{ month: 'MMMM yyyy', // September 2009 week: "MMM d[ yyyy]{ 'to'[ MMM] d, yyyy}", // Sep 7 - 13 2009 day: 'ddd, MMMM d, yyyy' // Tuesday, Sep 8, 2009 }, allDayText:'All Day', header:{ left: 'prev title next, today', center: '', right: 'agendaWeek,agendaDay,month' }, eventSources: [ // your event source { url: 'http://ravecity.tv/feed/json', className:'calendar_magenta' }, { url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic', className: 'calendar_navy' } ], drop: function(date, allDay) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } } }); $('ul#calendar_drag_list li a').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()), // use the element's text as the event title className: 'calendar_black' }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 5 // original position after the drag }); });
  13. I'm currently using the JQuery plugin FullCalendar; which has a feature to pull in events from a google calendar. But I've written a script that dynamically creates RSS from a database, the only snag is it's not formatted like a GCAL feed [https://www.google.com/calendar/feeds/nueoipsjhgm857gpojq5563cfo@group.calendar.google.com/public/basic]. I believe If I can format my feed like a GCAL feed FullCalendar will be able to read it; correct? [if yes, how?] Or would I be better off adding this functionality so I don't have to keep the XML markup the same as google's? FullCalendar reads GCAL feeds using the following code, could it be edited for custom RSS feeds? /* * FullCalendar v1.5 Google Calendar Plugin * * Copyright (c) 2011 Adam Shaw * Dual licensed under the MIT and GPL licenses, located in * MIT-LICENSE.txt and GPL-LICENSE.txt respectively. * * Date: Sat Mar 19 18:59:37 2011 -0700 * */ (function($) {var fc = $.fullCalendar;var formatDate = fc.formatDate;var parseISO8601 = fc.parseISO8601;var addDays = fc.addDays;var applyAll = fc.applyAll;fc.sourceNormalizers.push(function(sourceOptions) { if (sourceOptions.dataType == 'gcal' || sourceOptions.dataType === undefined && (sourceOptions.url || '').match(/^(http|https):\/\/www.google.com\/calendar\/feeds\//)) { sourceOptions.dataType = 'gcal'; if (sourceOptions.editable === undefined) { sourceOptions.editable = false; } }});fc.sourceFetchers.push(function(sourceOptions, start, end) { if (sourceOptions.dataType == 'gcal') { return transformOptions(sourceOptions, start, end); }});function transformOptions(sourceOptions, start, end) { var success = sourceOptions.success; var data = $.extend({}, sourceOptions.data || {}, { 'start-min': formatDate(start, 'u'), 'start-max': formatDate(end, 'u'), 'singleevents': true, 'max-results': 9999 }); var ctz = sourceOptions.currentTimezone; if (ctz) { data.ctz = ctz = ctz.replace(' ', '_'); } return $.extend({}, sourceOptions, { url: sourceOptions.url.replace(/\/basic$/, '/full') + '?alt=json-in-script&callback=?', dataType: 'jsonp', data: data, startParam: false, endParam: false, success: function(data) { var events = []; if (data.feed.entry) { $.each(data.feed.entry, function(i, entry) { var startStr = entry['gd$when'][0]['startTime']; var start = parseISO8601(startStr, true); var end = parseISO8601(entry['gd$when'][0]['endTime'], true); var allDay = startStr.indexOf('T') == -1; var url; $.each(entry.link, function(i, link) { if (link.type == 'text/html') { url = link.href; if (ctz) { url += (url.indexOf('?') == -1 ? '?' : '&') + 'ctz=' + ctz; } } }); if (allDay) { addDays(end, -1); // make inclusive } events.push({ id: entry['gCal$uid']['value'], title: entry['title']['$t'], url: url, start: start, end: end, allDay: allDay, location: entry['gd$where'][0]['valueString'], description: entry['content']['$t'] }); }); } var args = [events].concat(Array.prototype.slice.call(arguments, 1)); var res = applyAll(success, this, args); if ($.isArray(res)) { return res; } return events; } }); }// legacyfc.gcalFeed = function(url, sourceOptions) { return $.extend({}, sourceOptions, { url: url, dataType: 'gcal' });};})(jQuery);
  14. I understand, the poll is for popularity to see which option is more popular [should've chosen better words]. The thread itself is to gain opinions as far as what works better for what. I'm aiming towards building the website into a large site which would handle many users. Popularity is important as far as which one more people would be able [or willing or likely] to use. I'm also inquiring which is easier / more robust / more secure? Does that make more sense?
  15. I'm curious about everyone's opinions on using other login system (e.g. facebook, twitter, google, etc..). First of all if I was to choose JUST ONE to integrate, which would be the "best"? What about OpenID? Would it be better to integrate that, or a social media website's login system? I'm posting this for opinions, opinions, opinions! So please throw in your 2 cents on the issue!
  16. I'm currently editing a pre-existing template but in the submit buttons they used javascript and button tags, and I'm trying to translate that into php and the input submit tag. Any ideas on how to do this? I've finished the validation all that's left is the CSS.Current HTML & CSS <button class="button_colour round_all" onClick="location.href='../auth/login'"><img width="24" height="24" alt="Locked 2" src="../beauty/images/body/icons/small/white/Locked%202.png"><span>Login</span></button>#login_box button { clear: both; display: block; float: right; margin: 10px 30px 55px;}body .round_all { border-radius: 3px 3px 3px 3px;}button, button.skin_colour { background: -moz-linear-gradient(center top , #9B6CA6 0%, #8D579A 99%) repeat scroll 0 0 transparent; border: 1px solid #8D579A; box-shadow: 0 1px 0 #FFFFFF, 0 1px 0 rgba(255, 255, 255, 0.2) inset;}
  17. So would I apply the id "MAIN THUMBNAIL" to the large image or a container? And would this work on click? or how exactly does this example work?Thank you! [:
  18. I've looked through tons of Javascript "Galleries" and "Slide shows" and I still have yet to find exactly what I'm looking for.What I need is a slide show set up horizontally with a larger main image and off to the side click-able thumbnails.On click the main image would fade in the new picture.The other aspect would be the thumbnails slide away to reveal more thumbnails that are also click-able.and when a thumbnail hasn't been clicked on after so many seconds (like a slide show) the next picture would fade in the larger space.And if it's not too much for it to be written in jQuery.Does anyone know anything similar or how I would build one or add on to an existing one?Any & All help is appreciated! [:Something like this:
  19. Nevermind, I realized that I just needed to add "list-style: none;" to the css.
  20. Thank you jlhaslip,I found a menu that suits my needs, and after a few small changes to add a link on the right side, there appears to be a small circle on the upper left hand corner. Does anybody know how to get rid of this?Any and All help is appreciated. [:
  21. Idk, what to do, I've tried both suggestions and still no difference.
  22. I tried this and no change, does anybody know? Thank you for trying [:
  23. I'm currently building a new site, and my current obstacle is the navigation bar. I'm trying to get it to be 100% and all of the links (list items) to be fluid even lengths, but I'm not sure how to edit my current css to do so.A working example of my bar is here: http://studios.picsbypros.com/x/Any and All help is appreciated! [:The Css: #menu{ margin:0 auto; width:100%; } #menu ul{ list-style:none; } #menu li{ list-style:none; display:block; float:left; background:#f4f4ec; border-bottom:4px solid #7400cf; } #menu li a{ display:block; float:left; color:#000000; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:35px; border:solid #e1e1d3; border-width:1px 1px 0 1px; text-decoration:none; padding:0 25px; } #menu li a:hover{ color:#7400CF; } #menu li a.current{ display:block; float:left; background:url(../images/menu_002_h.jpg) repeat-x; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; line-height:35px; border:solid #e1e1d3; border-width:1px 1px 0 0; text-decoration:none; padding:0 25px; } #menu li a:hover.current{ color:#fff; } The Html: <div id="menu"> <ul> <li><a href="#" class="current">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">services</a></li> <li><a href="#">solutions</a></li> <li><a href="#">contact us</a></li> </ul></div>
  24. I'll be looking into some compression soon, and i'll try to downsize soon, but I'm more concerned with other suggestions about the website: design, layout, etc.
  25. Hello Everyone, I'm looking for suggestions and critiques of my Website; PicsbyPros.com.Any and All help is appreciated.
  • Create New...