lcot

I am on the search for a jQuery or even vanillaJS-based plugin that can replicate similar functionality to that of the 'FIND WHAT MATTERS' section of this web HOMEPAGE . It is the 'team grid' section where there are rows of responsive images, and a dropdown container beneath each row that contains dymanic content dependent on which 'accordian item' or image was clicked on. You can see a screenshot here: https://monosnap.com/file/M8zQInDm6d3IQ84QOb49Y0JqSlA78F The grid is responsive, shrinking from 8 per row, to 3 per row on mobile and the dropdown expands beneath the row of the image, no matter the screen size. Does anyone know of any plugin that can achieve this functionality, or am I going to have to develop this by myself? Thanks!

Hi, I am researching for a college paper and business plan development. I am wondering if any of you knew how online music streaming services (like http://grooveshark.com/) work? By work, I mean how do they stream their music to the user? Do they have a storage server to store the music and use databases/php to deliver the music as a unicast to a html5 player? Could someone who has some knowledge or better idea than me know how a service like this technically works in the back-end? Thanks!

Basically, for the entire site.. I would like a system for latest news articles, and a system for the appeals page (It's a charity website). So for each, the concept will be very similar. For the appeals, I will either have a link to another page in the website, like a country page for example or like the example above. And the for the news, I will have a link like your example above to a news.php?id=1. So creating an SQL is an option as both tables would be relatively simple. Most likely consisting of fields such as $header, $url, $date, $body (in html), $image etc. However, this is currently on localhost and will be tested on a server of mine, and then sent over to the charities hosting server. I think, in terms of simplicity perhaps the php option? I say this as I think it would be easier to enter new data into a template php file with a new id. When you mentioned the GET function and said how/where will my site do this? I am unsure as to exactly what you mean. I have the following structure: for the news article files - www/assets/news/(article1.php) The news overview page will be - www/news/(index.php) The article view page should be - www/news/(article.php?id=1) The article view page is simply a template with a range of variables waiting to be filled in by a php file it includes. The php file it includes will determine which link is clicked from the overview page. Where its ?id=1 or ?id=13, it should know which article php file to grab the variables from. I am trying to run it through in my head and I am still figuring out how it will do this, yet I am not fluent in the php functions for a long shot. I read somewhere about a scandir? Might be useless for what I am trying to achieve. I am reading up and trying to expand my knowledge to try and help myself and you But thanks for all the help so far.. I will await your response and advice

I do not have a database.. I just have a folder of php files with variables for each article. I have not yet learned how to create a sql database.. Should I? or can I do it using my current setup of php files in a directory? Sorry for the delay in replying also! I missed this post on the forum..

To get it out of the way, I am learning php as I go and I am new to it. I am really trying to get my hands dirty in it on this project to learn and to make my life easier! I have a scenario, and I would love for someone to help me out through it and point me in the right direction. My scenario is: I have a latest news page on my 'static' website. I am using php includes on the header, navbar and footer for every page. I am using includes to grab the latest news information I have in assets/news/form/news1.php. This is the following: <?php if (!defined("ACCESS")) { die ("Don't waste your time trying to access this file!! Please head to the families relief home page and donate!!"); } ?> <?php $header = 'Article Header'; $date = 'June 1st 2013'; $url = '/news/articleName'; $body = 'Body in HTML'; ?> I then have another file in assets/news/news1.php containing: <div id="appeal3" class="row-fluid"> <div class="well span12"> <div class="span3"> <div class="thumbnail"> <a href="<?php echo $url ?>"><img src="/img/news-blank.jpg"></a> </div> </div><!-- span3 --> <div class="span9 appeals"> <p class="app-date"><?php echo $date?></p> <a href="<?php echo $url ?>"><h3><?php echo $header ?></h3></a> <p><?php echo substr($body, 0, 200) ?><span class="readmore"><a href="<?php echo $url ?> "> ...Read More ></a></span></p> </div><!-- span9 --> </div><!-- well span12 --> </div><!-- appeal# --> I then use the following code on my news overview page at /news/index.php to display the html with the variables entered: <?php include("$_SERVER[DOCUMENT_ROOT]/assets/news/news1.php"); ?> So what this gives me is an overview page, with the news article displayed around a wrapper in overview view. I then have another page when the overview 'read more' is clicked. Within this page, I have a full view news article page with a wrapper where I can echo the variables in. Wha La! That is my news article structure.. Long winded isn't it! Now, what I want!! I want to be able to include the variables from an article into my overview page and include the 2nd block of code above as the template. I then want the articles to fill out the variables. However, I have 5 articles on this page with identical variables. What is the best and most efficient way to do this?? Secondly, I have a full-view article page. How can I use this page as a template, and change the php it gets it's variables from. But, I don't want to create a new php page every time I have a new article. What I had in mind, is something like the following: domain.com/news/article/index.php?news1 I have been reading up on passing variables in a URL. I want to expand my knowledge on this. Could this be the solution to my problem. My issue is that I have NO idea how to go about this? Can someone please lecture me to solve this and hopefully teach me a little in between! Thanks!

Hello, Could someone help me out? I would like to simplify my life by providing a news page where I can simply have a template php doc with a blank content area that is filled by data from my news article. Rather than making a new page for every article I publish, I would like to be able to click a link that fills in the data from another php file with the article in. By this I mean so the domain is something like this: > domain.com/news.php?article1 rather > than /news/article1.php How can I go about this or where shall I go to read up about something like this. I was thinking of heading to a cms, however taking the time to learn to template my website just for one news page to regularly update seems a little too much effort than it's worth. I would rather not have to create a new page every time I add an article. I would simply just like to add a new template php file, that I can call upon to display the relevant information on a common news page. My problem is, I am learning at this moment and I do not know where to start. Any advice will be more than welcome! Thank you.

I am wanting to make my life easier when using php include tags to include a php script or html from another source. My problem is, on a localhost mamp.. all is great and it works. Upload it to a server and I get errors. Can someone help me understand what I need to do to get this to work on my hosting server? <?php include ($_SERVER['DOCUMENT_ROOT'] . '/assets/navbar.php'); ?> gives me the error of: Warning: include() [function.include]: Failed opening '/home/'domain'/public_html/assets/subbar.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/'domain'/public_html/families_relief/index.php on line 34 The actual folder root the website is it is: domain.com/families_relief Mainly because it is a tester. I am looking for some sort of way to work it so that the include will always grab the right code and knows where to look. I was looking at something like a 'baseURL'. But anyone offer me advice, I will happily take it! Thanks

Thank you for the feedback! I will work on improving it now..

Hello, I am no php expert and I have only ever made 1 contact form YEARSSSS ago! so, this is where I am at currently on my own php contact form. Is this acceptable? I am running my site on a MAMP so I do not know if this is working? I have built my form and I want my php code to work with this form. I have tried adapting a script around it.. Can someone help me out with creating this script? <?php if ($_POST["email"]<>'') { $ToEmail = 'someone@email.com'; $EmailSubject = 'Email Subject'; $mailheader = "From: ".$_POST["email"]."\r\n"; $mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; $MESSAGE_BODY = "First Name: ".$_POST["first_name"].""; $MESSAGE_BODY = "Last Name: ".$_POST["last_name"].""; $MESSAGE_BODY .= "Email: ".$_POST["email_address"].""; $MESSAGE_BODY .= "Message: ".nl2br($_POST["message"]).""; mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); ?> <h4>Your message was sent</h4> <?php } else { ?> <form class="well span8 offset2" action="/contact/index.php" method="POST"> <div class="row"> <div class="span3"> <label>First Name</label> <input type="text" name="first_name" id="first_name" class="span3" placeholder="Your First Name" > <label>Last Name</label> <input type="text" name="last_name" id="last_name" class="span3" placeholder="Your Last Name" > <label>Email Address</label> <input type="text" name="email_address" id="email_address" class="span3" type="email" placeholder="Your email address" > </div> <div class="span5"> <label>Message</label> <textarea name="message" id="message" class="input-xlarge span5" rows="10" ></textarea> </div> <button type="submit" class="btn btn-success pull-right">Send</button> </div> </form> <?php }; ?> If anyone with more experience can hand me a php script that they use? Or something to fit around my form. The form is included in the 2nd part of my code posted above. The framework I am working on is Bootstrap. Thanks!

Does anyone know a way to save hi-res large google maps images eg 1600px width? I know google renders it automatically just like on here: https://plus.google.com/117478287139012796858/about?gl=uk&hl=en I can grab the url of the image and save it, but this is only for specific businesses. I want to be able to put a marker in and download a rendered image around that marker. Does anyone know how I can do this? Anyone know or done this before?

Unfortunately, this is a localhost and have no server to host on at this moment. I have however in the meantime been working hard at it reading documentation after documentation and have arrived at the following: (post for assistance if anyone may need it). $('ul[class="address-list"] li a').on('click', function(e) { e.preventDefault(); var cl = $(this).attr('href').replace('#',''); $('.map-wrapper').removeClass().addClass('map-wrapper '+cl); return false; // Prevent default behaviour }); and the image wrapper: <div class="map-wrapper mg-default"></div> and the list of links: <div class="span3"> <h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Offices</i></h4> <ul class="address-list"> <li><a href="#mg-london"> <address> <strong>Head Office - London</strong><br /> Suite 304, Crown House<br /> North Circular Road<br /> London NW10 7PN<br /> <abbr title="Phone">P:</abbr> 020 8961 2632<br> </address> </a></li> <li><a href="#mg-sheffield"> <address> <strong>Northern Office</strong><br /> 133 Abbeydale Road<br /> Sheffield<br /> S7 1FE<br /> <abbr title="Phone">P:</abbr> 0114 438 8047<br> </address> </a></li></ul> </div><!-- span3 --> <div class="span3"> <h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Stores</i></h4> <ul class="address-list"> <li><a href="#mg-dewsbury"> <address> <strong>Dewsbury</strong><br /> 102 Pionier House<br /> Halifax Road<br /> WF13 4JJ<br /> <abbr title="Phone">P:</abbr> 0192 445 9740<br> <abbr title="Email">@:</abbr> Dewsbury@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-birmingham"> <address> <strong>Birmingham</strong><br /> 517 Moseley Road<br /> Birmingham<br /> B12 9BX<br /> <abbr title="Phone">P:</abbr> 0121 440 8840<br> <abbr title="Email">@:</abbr> Birmingham@familiesrelief.org.uk </address> </a></li></ul> </div><!-- span3 --> <div class="span3" style="margin-top: 22px;"> <ul class="address-list"> <li><a href="#mg-ealing"> <address> <strong>Ealing</strong><br /> 93 The Broadway<br /> West Ealing<br /> W13 9BP<br /> <abbr title="Phone">P:</abbr> 0208 567 3399<br> <abbr title="Email">@:</abbr> Ealing@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-halifax"> <address> <strong>Halifax</strong><br /> Diversity Project<br /> 198 Queens Road<br /> HX1 4NE<br /> <abbr title="Phone">P:</abbr> 0142 232 2550<br> <abbr title="Email">@:</abbr> Halifax@familiesrelief.org.uk </address> </a></li></ul> </div> <div class="span3" style="margin-top: 22px;"> <ul class="address-list"> <li><a href="#mg-greenford"> <address> <strong>Greenford</strong><br /> 64 The Broadway<br /> Ruislip Road<br /> Greenford UB6 9QJ<br /> <abbr title="Phone">P:</abbr> 0208 578 9080<br> <abbr title="Email">@:</abbr> Greenford@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-sheffield"> <address> <strong>Sheffield</strong><br /> Al Shifa Charity Shop<br /> 133 Abbeydale Road<br /> Sheffield S7 1FE<br /> <abbr title="Phone">P:</abbr> 0114 438 8047<br> <abbr title="Email">@:</abbr> Sheffield@familiesrelief.org.uk </address> </a></li></ul> </div> This, gets me to the point where it all works fine! I now just would like to add an easing effect.. any ideas on what to add and where for a fade in effect for example? ALSO, I know this is working.. But I would like to link the picture to the google map page in a new window or tab. I would like the link to change depending on what image is being viewed. Any ideas on this?

Hello, I have a series of addresses on my contact page. I have a 1200x250 px series of maps for each address that goes across the top of the page. I want to click on an address, and the image changes to the image of that map of the address. EASY! So, what I have done so far. I have got a jQuery script: var itemInfo = { // Initialise the item information img1: ['/img/map.png', ''], img2: ['/img/map2.jpg', ''], img3: ['/img/map3.jpg', ''], }; $(function() { $('#maps a').click(function() { // When an item is selected var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID $('#info img').attr('src', itemInfo[id][0]); // Set the image $('#info p').text(itemInfo[id][1]); // And text return false; // Prevent default behaviour }); }); I am using the address links in the following format: <ul> <li><a href="#img1">Address 1</a></li> <li><a href="#img2">Address 2</a></li> <li><a href="#img3">Address 3</a></li> </ul and the image wrapper is as follows: <div id="info"> <div class="map-grad" style="background-image: url(/img/map.png);"> </div> </div> the css of the wrapper is as follows: .map-grad { background-image: url(../img/map.png); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)"; background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background-position: center; height: 250px; max-height: 250px; max-width: 1600px; } So, I have all of this! now, I can get rid of the css background-image at the end of the <div class="map-grad"> and simply put a <img src="map1.png"> and the jQuery will replace this. This currently works, however I have a gradient over the image that really compliments the design of the website! So, I am after some assistance with someone who knows jQuery to help me rewrite my script to replace all of the ../img/map.png with the relevant link depending on which address link I click. One option is bringing all of the css from the stylesheet above for the .map-grad and putting it within the map-grad div tag around the style="css-here" However, in any case, I will need to replace every mention of the map image which in this case is 6 times. Another more favourable option by me, is to create a class for each address. It will be identical except the background-image will point to the relevant image. I am just unsure on how to rewrite my code to change the div class when clicked. Help will be a live changing save! Criticism is welcome also if I have coded something awkwardly. Thanks

That's it.. very nearly! I've changed a couple of things but I see what you've done now. I've got it solved.. THANK YOU!

Problems after problems.. Okay, I am trying to get the following structure: <ul> <li> <a href="#">Nav Item 1</a> </li> <li class="dropdown"> <a href="/where" class="dropdown-toggle disabled" data-toggle="dropdown"> Where? <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="nav-header"> SUBNAV HEADER </li> <li class="divider"></li> <li><a href="#">SubNav 1</a></li> <li><a href="#">SubNav 2</a></li> </ul> </li> <li> <a href="#">Nav Item 2</a> </li> <li> <a href="#">Nav Item 3</a> </li> </ul> The classes that are included above HAVE to be included by default. I am wanting this php to output the above code, and depending on the $page value, if it is Nav Item 2, the <li class="active"> will be active. If you could figure out this php array and foreach statement for me, I hope I can learn from that. This is something where I know the output I desire and if I have the php infront of me that works, I can better understand it. Thanks!

I'll run this now!! Thanks for the reply.. I have actually been reading up on nested arrays as I thought that is what I needed.. hopefully this will help me better understand them and work for the website! Thanks. Ill report back shortly.