Jump to content


codebyren

Member Since 12 Oct 2007
Offline Last Active Private

#1462993 Change Image using jQuery

Posted by codebyren on 23 December 2013 - 08:17 AM

I'm sure there is an existing slider solution that meets your requirements. I haven't tried it myself but Google found Sudo Slider with a dynamic height/width example here: http://webbies.dk/as...h centered.html

 

As for your idea to manually change the image in a div, I've written a jsfiddle (code below too) so you can see how this could be done in jQuery.  It might be a little involved if you have little or no jQuery/JavaScript experience but you'll have to hit the documentation sometime... 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Image Switch</title>
</head>
<body>

	<div id="container">
		
		<div id="product">			

			<ul id="controls">
				<li><a href="#" data-action="prev">Previous</a></li>
				<li><a href="#" data-action="next">Next</a></li>
			</ul>

			<div id="imagediv">
				<img src="http://placehold.it/100x150.png" alt="">
			</div>

			<p>This is some information about the product</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, itaque, eveniet quae sunt aperiam beatae!</p>

		</div>
		
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">

		$(document).ready(function() {

			// The images that we want to cycle through...
			var images = ['http://placehold.it/100x150.png', 'http://placehold.it/200x200.png', 'http://placehold.it/150x150.png', 'http://placehold.it/300x100.png'];

			// The links that cycle the images
			var $controls = $('#controls a');

			// The image element
			var $image = $('#imagediv').find('img:first');

			$controls.click(function(e) {

				// The prev/next links don't actually go anywhere...
				e.preventDefault();

				// If for some reason there are no images...
				if ( ! images.length) return false;  

				// The link that's just been clicked
				var $link = $(this);

				// Which direction to cycle the images
				var action = $link.data('action') == 'next' ? 'next' : 'prev';

				// Find the position of our currently displayed image in the list of possible images
				var image_url = $image.attr('src');
				var image_index = $.inArray(image_url, images);  // $.inArray returns -1 if the item doesn't exist in the array to search

				// Calculate the position of the previous and next images relative to current image in the images array
				// (accounting for when the user hits "next" on the last image or "previous" on first image)
				var next_index = (image_index + 1 <= images.length - 1) ? image_index + 1 : 0;
				var prev_index = (image_index - 1 >= 0) ? image_index - 1 : images.length - 1;

				// Find the new image's URL using the images array
				var new_image = (action == 'next') ? images[next_index] : images[prev_index];				

				// Update the image element with the new image's URL
				$image.attr('src', new_image);
			});

		});

	</script>
</body>
</html>



#1422755 Table Data into Drop Down

Posted by codebyren on 03 April 2013 - 10:34 PM

There is a lot of repeated code for dealing with DB queries.  You could try something like this:

 

<?php
// Fetch locations, responsibilities and types in one go...
$locations = $responsibilities = $types = array();
$query = "SELECT `Location`, `Responsibility`, `Type` FROM `admin`";
$result = mysql_query($query) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
    $locations[] = $row['Location'];
    $responsibilities[] = $row['Responsibility'];
    $types[] = $row['Type'];
}

// Maybe hack in some last-minute sorting...
sort($locations);
sort($responsibilities);
sort($types);
?>

<!-- A sample drop-down menu population -->
<label for="location">Location: </label>
<select name="location" id="location">
    <option value="">Please Select</option>
    <?php foreach ($locations as $location) : ?>
    <option value="<?php echo $location; ?>"><?php echo $location; ?></option>
    <?php endforeach; ?>
</select>

It's a personal preference I guess, but that looks pretty clean.

 




#1421863 codeigniter and css

Posted by codebyren on 29 March 2013 - 10:14 PM

You should look into and use "relative paths" (or URLs).  Then you can provide the location of the background image relative to the location of the CSS file.  Something like:

 

url('../../images/image.jpg')

 

The above (for example) would traverse two levels up from where the CSS file is located and then into an "images" subdirectory to find image.jpg




#1413579 how to display data for current month..?

Posted by codebyren on 20 February 2013 - 06:19 AM

You can get the first and last day of the current month pretty easily using the date() function. Something like:

<?php
$first_day = date('Y-m-\0\1'); # force "01" as the day here.
$last_day = date('Y-m-t'); # the "t" is for the number of days in the given month (i.e. always the last day of the month)

$cart = "select * from tbl_cart where pdate between '$first_day' and '$last_day' and uid = '".$_SESSION['id']."'";
?>

Hope I didn't overlook anything...