Jump to content

Search the Community

Showing results for tags 'css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 44 results

  1. So I'm posting this in CSS because I think I'm having a CSS issue. Basically, I have this right now: I'm trying to vertically center the blue box and everything inside it. I've tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn't responsive so that's a problem. I'm using Bootstrap from the CDN if that matters. I'm only going to include code for the first box so that it doesn't get messy. HTML: <div class="container category-forums clearfix"> <div class="container category-forums-wrap"> <div class="container category-icon clearfix"></div> <div class="container forum-details-wrapper clearfix"> <div class="container forum-details-container"> <p class="forum-name">News Center</p> <p class="forum-desc">Stay up to date with all the latest news and, more importantly, familiarize yourself with the rules.</p> <div class="sub-forum-container container clearfix"> <p class="sub-forums clearfix">Sub-Category 1</p> <p class="sub-forums clearfix">Sub-Category 2</p> <p class="sub-forums clearfix">Sub-Category 3</p> </div> </div> </div> <div class="container forum-threads clearfix"> <h4>108</h4> <p>Threads</p> </div> <div class="container forum-posts clearfix"> <h4>2000</h4> <p>Posts</p> </div> <div class="container forum-latest-posts clearfix"> <div class="container last-avatar clearfix"></div> <p>Lastest thread</p> <p>Yesterday 3:15pm</p> </div> </div> </div> CSS: .category-forums { width: 100%; height: 41%; background-color: #ecf0f1; padding: 0; border-bottom-left-radius:.25rem!important; border-bottom-right-radius:.25rem!important; } .category-icon { width: 7%; height: 100%; border-right: 1px dotted lightgray; margin: 0; float: left; line-height: 100%; } .category-forums-wrap { height: 70%; width: 100%; border: 1px dotted blue; padding: 0; display: inline-block; vertical-align: middle; } .forum-details-wrapper { width: 55%; height: 100%; border-right: 1px dotted lightgray; margin: 0; float: left; padding: 0; } .forum-details-container { width: 100%; height: 100%; border: 1px dotted gray; margin: 0; } .forum-name { margin: 0; } .sub-forum-container { width: 100%; float: left; margin: 0; } .sub-forums { width: 31%; margin: 0; float: left; } .forum-desc { margin: 0; font-size: 1.3rem; } .forum-threads { width: 9%; height: 100%; border-right: 1px dotted lightgray; float: left; text-align: center; line-height: 100%; } .forum-posts { width: 9%; height: 100%; border-right: 1px dotted lightgray; float: left; line-height: 100%; } .forum-latest-posts { width: 20%; height: 100%; float: left; } .last-avatar { width: 25%; height: 100%; border-right: 1px dotted lightgray; float: left; text-align: center; line-height: 100%; } I'm having a tough time even centering the text vertically.
  2. I created a login system with bootstrap but for some reason I cannot delete the "placeholder" (in which it is written "admin") in both the inputs of the form ("uname" and "psw"). Even if I change the placeholder it's remain "admin". Have you any idea? This is the code: <!DOCTYPE html> <html> <head> <title>Login</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <div class="container"> <div class="jumbotron text-center" id="jumbo_log"> <h1>Login Page</h1> <p>You must login to enter</p> <form id="theform" method="get"> <div class="container2"> <label for="uname"><b>Username</b></label> <input type="text" id= "uname" name="uname" required><br> <label for="psw"><b>Password</b></label> <input type="password" id="psw" name="psw" required><br><br> <input type="submit" id="submit" class="btn btn-info" value="Login"><br><br> <a class="btn btn-primary" href="registration.php" role="button">Click here if you are not registered</a> </div> </form> </div> </body> </html>
  3. In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc. I have no clue what to do, if you can help I will be grateful for all time. Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too?
  4. Hey! I want to create a website that can test your counting pace. I’ll make colored, square div that change color after 10 to 30 seconds when you hover over it, and then you’ll type down how long you think it took in a form to check if you’re right. My solution to do this is to create the PHP variable $time = rand(10,30), and in CSS get the div:hover transition-delay to be $time. Then, after the form, I need the same variable for if($_POST[timeguess] = $time) {echo “Correct!”}. I have no idea how to access the same variable in both the CSS and HTML, so I hope some of you can help me out! Thanks
  5. Hi I am trying to build a contact form and my form isnt sending. Here is my code. (its in a modal window)(I have my email address in the $to variable in the code) <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: Jarrod'; $to = 'email'; $subject = "Landing page"; $body = "From: $name\n Email: $email\n Message:\n $message"; ?> <?php if ($_POST['submit']){ if(mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; }else{ echo '<p>Something went wrong, go back!</p>'; } } ?> <div class="modal fade" id="contact" role="dialog"> <div class=" modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h2>Contact us</h2> </div> <div class="modal-body"> <form method="post" action="index1.php"> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="email" placeholder="Email"> <label for="Message">Message</label> <textarea class="form-control" id="message" placeholder="Message"></textarea> <input type="submit" value="Send">Send</button> </form> <div class="modal-footer"> <a class="btn btn-default" data-dismiss = "modal">Close</a> </div> </div> </div> </div>
  6. Hello Everyone, As I am a novice, posting this simple question. Am trying to design my first webpage using PHP. I have successfully created a wrapper page (index.php) as in the attachment whereas I get into trouble when I try to include PHP content pages into index.php. The real problem occurs in the alignment and not with the include command. The problem seems not to go away even if I match the height and width of #contentsize to #rcontent. PHP: <div id="rcontent"> <div id=contentsize> <?php include 'home.php'; ?> </div> </div> CSS: #rcontent { width:894px; height:530px; background-color:blue; float:right; border-color:white; border-width:5px 3px 5px 3px; border-style:solid; } #contentsize { width:894px; height:530px; } Could someone help me out? Expected Result: PHP contents should fit in blue box. Thanks in Advance!!
  7. Hi, I'm currently stuck as two how I can do this, I have a desktop and mobile design where on Desktop the design acts like tabs but on mobile it acts as an Accordion. But i'm not too sure how the best way to go about this is. Please see attached the designs. Any examples or advice on how to do this would be greatly appreciated.
  8. Hello, I have this small html and php files and the problem is I can't send any emails... When I press submit it just opens php file on the browser. Can anyone help me? Here is the code <html> <link href="style.css" rel="stylesheet" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Contact Form</title> </head> <body> <header class="body"> </header> <section class="body"> <form method="post" action="mail.php"> <label>Name</label> <input name="name" placeholder="Type Here"> <label>Email</label> <input name="email" type="email" placeholder="Type Here"> <label>Message</label> <textarea name="message" placeholder="Type Here"></textarea> <label>*What is 2+2? (Anti-spam)</label> <input name="human" placeholder="Type Here"> <input id="submit" name="submit" type="submit" value="Submit"> </form> </section> <footer class="body"> </footer> </body> </html> <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: TangledDemo'; $to = 'myemail@gmail.com'; $subject = 'Hello'; $human = $_POST['human']; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; if ($_POST['submit']) { if ($name != '' && $email != '') { if ($human == '4') { if (mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; } else { echo '<p>Something went wrong, go back and try again!</p>'; } } else if ($_POST['submit'] && $human != '4') { echo '<p>You answered the anti-spam question incorrectly!</p>'; } } else { echo '<p>You need to fill in all required fields!!</p>'; } } ?>
  9. Hi I am currently using bootstrap to design a landing page. I want to add a contact us form and I need to use a text area for long messages. When I use it with bootstrap it just appears as a single line and not a large field. How can I style just 1 field instead of all of them? This is my HTML code. <form> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="Name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="Email" placeholder="Email"> <label for="Message">Message</label> <input type="textarea" class="form-control" id="Message" placeholder="Message"> </form>
  10. Hi all I am using media queries in my css to create a responsive site, when I view the site on a mobile, the site responds as I intend it to. However if I view it on a desktop and resize the screen, it doesn't respond as I would like, the idea is, if I resize the desktop version enough then I will view the mobile version. in one css file I have @media screen and(max-width: 1024px) { css styles } and then on another file, I have the following, the idea with this is when I get below the specified screen size the items don't show @media screen and (min-width: 1024px) { } if you need any more info let me know. Thanks Mark
  11. I've finished designing my website home page and I've now moved on the some of the other pages, I want my header and footer to appear the same on every page. I've tried this basic way of linking the same stylesheet that makes up my header/footer in the second HTML file (already used in the homepage): <link rel="stylesheet" href="footer.css" type="text/css"/> <link rel="stylesheet" href="header.css" type="text/css"/> I now understand that this isn't going to work. Would a server-side scripting language be my best bet here? Something like PHP? If so, would anyone be able to link me with an article on how I could do this in PHP, I presume with the include function? I've had answers elsewhere but this, for me, isn't working: "You are currently only linking the css for the header and footer. If you want to include the html as the same, create two separate files header.php and footer.php, then include them into each webpage. <?php include('path/to/header.php');?> // in the location you want the header in the page <?php include('path/to/footer.php');?> // in the location you want the footer Essentially, you're making partials and placing them wherever you want them" Any help would be greatly appreciated.
  12. Hello, I am looking for a css dev to complete a navigation menu (or replace it). I will give you the current code (static html and css) you will have to create the css on your own server. Please do not ask for me to create an environment for you to work in. The dev needs good English, French or Dutch language skills to communicate. After the navigation menu is finished, more work for general layout is possible. you can look at the current version here http://www.test.anatak.com/en/twintipFusion3lw.php payment will be made by paypal after delivery 5000 yen for the navigation with general layout of website CSS navigation in CSS and HTML (No javascript) Responsive style for mobile devices general layout for site (div for navigation, content and footer) thank you anatak Please contact me on info [@] anatak.com
  13. Hi, I hope I am in the right place for some help. If not, I apologize I have just installed e-fiction on my website and I am having a little issue with some of the codes and where I need to go to modify things. This is a screenshot of the page and what I am trying to modify. What I want to do is make the banner CENTERED. This I thought was easy but whatever I do, it doesn't seem to work. I must be looking in the wrong place. Secondly, I want to move the menu bar - HOME - MEMBERS - SEARCH etc underneath the banner and that too to be centered. I am going to upload the files to Sendspace ( http://www.sendspace.com/file/mi0i6e), as the zip is too big to upload here and I am unsure which files need to be modified (that is where I am stuck) Thank you SO much, and I hope someone can help me. I am trying to learn all of this and it's all so confusing
  14. I just want to add a css cass named "active" to my navigation links when its page opened using php. In my website the content have broken into its individual components. And those components are separated, organized, and put back together using one index file. (website bootstrap file) Actually I am modularizing this website using php. My Navigation is something similar to this code - ... <li> <a href="index.php?p=dashboard">Dashboard</a> </li> <li> <a href="index.php?p=page-two">Page Two</a> </li> <li> <a href="index.php?p=page-three">Page Page Three</a> </li> ... This is how my index.php looks like - // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'dashboard': $page = 'dashboard.inc.php'; $page_title = 'Control Panel'; break; case 'page-three': $page = 'page-three.inc.php'; $page_title = 'Page Three'; break; case 'page-two': $page = 'page-two.inc.php'; $page_title = 'Page Two'; break; // Default is to include the main page. default: $page = 'login.inc.php'; $page_title = 'Control Panel Login'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'login.inc.php'; $page_title = 'Control Panel Login'; } include('./includes/header.html'); include('./modules/' . $page); include('./includes/footer.html'); I tried it something like this - case 'dashboard': $page = 'dashboard.inc.php'; $page_title = 'Control Panel'; $class == ($page == $p) ? 'active' : ''; break; And adding this class to my navigation <li> <a class="<?php echo $class;?>">.... </li> But this is not working for me. hope somebody may help me out. Thank you.
  15. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  16. A website user was telling me that text wasn't appearing on bold when the CSS called for font-weight:bold. She's using a Mac desktop, with Safari (and possibly Chrome; I don't have all info yet). The font is Raleway: <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"> From what I was able to find -- no one on Google seemed to have this exact issue -- sometimes Safari won't show bold unless you specifically reference a font for it? Is that right? So the solution seems to be changing the stylesheet reference to: <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css"> This just seems incredibly odd to me. I've never heard of a user having this issue before. Is this known? Is that the actual fix? Am I to assume all browsers on Chromebook (my preferred platform) and Linux and Windows just create an ad-hoc "faux bold" to display, if bold isn't specified? A lot of questions, but this is just a weird issue, especially since I haven't heard of it until June 2016.
  17. I have a small issue here which I can't quite figure out. I have three containers on one page all below each other. One for buttons, a JS image slideshow and a description box. The image slider seems to take up unnecessary space when the browser is resized activating media queries: http://gyazo.com/33376dcadc99cba69d5668e240fae788 CSS desktop view (without media queries): body { background: #141414 url('../images/background1.png'); background-repeat: repeat-y; background-attachment:fixed; background-position:center; } #container{ height:450px; width:840px; margin:120px auto 2% auto; position:relative; } #container2{ height:60px; width:840px; margin:0 auto 50px auto; position:relative; -moz-box-shadow:0 0 5px 5px black; -webkit-box-shadow:0 0 5px 5px black; box-shadow:0 0 5px 5px black; } #container2 p{ color:white; font-size:15px; padding-left:5px; } #container2 h2{ color:white; font-size: 18px; text-decoration:none; padding-left:5px; padding-top:2px; } #img{ height:450px; width:840px; position:absolute; -moz-box-shadow: 0 0 5px 5px black; -webkit-box-shadow: 0 0 5px 5px black; box-shadow: 0 0 5px 5px black; } #l_holder{ height:450px; width:100px; position:absolute; left:0px; top:0px; cursor:pointer; } #r_holder{ height:450px; width:100px; position:absolute; right:0px; top:0px; cursor:pointer; } .left{ height:50px; width:50px; position:absolute; top:45%; left:0px; } .right{ height:50px; width:50px; position:absolute; top:45%; right:0px; } .clear{ clear:bottom; } CSS with media queries, this is where the container is causing a problem: @media all and (min-width: 3.5in) and (max-width: 10in) { body { background: #141414; } #container{ height:30%; width:100%; margin:5% auto; padding:0 0 0px 0; } #container2{ width:100%; margin: 0; padding: 0; } #container2 p{ padding-left:3px; } #container2 h2{ padding:5px 0 0 3px; } #container2 .body_black_box{ } #img{ height:80%; width:100%; } #l_holder{ height:80%; } #r_holder{ height:80%; } .left{ } .right{ } .clear{ } } Any help is greatly appreciated.
  18. I have this jquery code below. It basically shows a new div when mouse hover over another div. It works. But I noticed that on page load, it sometimes shows 1 or 2 products already hovered and showing the ".show-details" content. This doesn't happen on every page and sometimes it's only 1 product and sometimes it's 2 products. And they vary in the positions on a page. Do you know why it's doing that and how to fix it? By the way, I have ".show-details" set to display: none by default in the CSS file. <script> $(document).ready(function() { $(".product-small").hover(function() { $(this).find('.show-details').fadeIn("fast").css({ display: 'block'}); }, function(){ $(this).find('.show-details').fadeOut("fast").css({ display: 'block'}); }); }); </script>
  19. I have 3 price tables on my page. These tables under 720px width resolution should get one under the other one (i use bootstrap). The problem is that in any browsers they align well but on desktop safari, ios safari, ios firefox, ios chorome the tables not aligning well at all. You can take a look HERE on safari under 720px resolution to see how it looks. I don't manage to see what is causing the problem.
  20. Hi again PHP Freaks. So I would like to code something similar to the buy menu of Counter-strike: Global offensive in-game module, just in a browser and for a project of mine. I've made the design in photoshop to illustrate better. I just don't know what I should look into to make this kind of menu, I would love if someone could explain me what languages that this would require. (I'm guessing HTML, CSS and jQuery but I am not sure) more specific help like which particular codes would be much appreciated. Here is a picture of what I would like to create. (Also attached) http://i1227.photobucket.com/albums/ee433/rec0ill/CSGOKeyz_zps4195288a.png
  21. I am a plug-in author and need to have a simple CSS editor in my plug-in options page. what is the best way to do this? At now my plug-in just show a simple textarea, but I need to make it highlighted. Thanks.
  22. Hello there, my name is Ryan. I am a Web Developer from England that specialises in creating mobile-responsive websites. Whether you need a website that takes monthly payments, one-off purchases or runs ads I will take your idea and craft an elegant solution. Skills - PHP HTML5 CSS Javascript I have built user-interfaces and backend database systems, in my 10 years of web development there is little I haven't touched upon. If you are interested in my services you can contact me at: Email ryansocratous@gmail.com Skype ryanify Thank you.
  23. Can anyone suggest how to build web app like http://www1.lost-in-val-sinestra.com/ without flash. We want to pull the data from facebook and using pulled data edit the sample video and play in the browser. I was thinking to use image magick with ffmpeg to edit the video but unable to do it successfully. I tried to edit video using below steps 1. Extract all frames from the video using ffmpeg. 2. Identify the frames need to be customized. 3. Identify the coordinates of placeholders where we need to place the facebook data. 4. Using image magick customized frames with facebook image (facing difficulty here as the video moves continously taking coordinate of each frames is tedious) 5. Create final video with edited frames using ffmpeg.
  24. Wasnt sure whether to put this in Javascript or CSS, sorry... I'm using Skrollr at this dev URL (http://workwave.joomlatest01.mms-dev.com/) to make all the desk items "slide away" NOTE: things are messy currently but you get the gist of what happens (i.e. the clutter moves away and the software on the monitor replaces it) I'm using this "helper" function, found here (https://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/)... var setSkrollr = function($el, data) { for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value) var d = data[i], // the current data entry px = d[0]; // the scroll position (in pixels) css = d[1]; // the css property + value to set $el.attr('data-' + px, css); } } So the skrollr code for these moving desk items looks like this currently... jQuery(function($) { setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]); setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 50px ']]); setSkrollr($('#filecabinet'), [[0, 'top: -60px; left: 60%; display: block;'], [300, 'top: 280px; left: 200%; display: none']]); setSkrollr($('#calculator'), [[0, 'top:520px; left:0%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#stapler'), [[0, 'top:440px; left:12%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#pens'), [[0, 'top:280px; left:38%;'], [300, 'top:580px; left:-200%; ']]); setSkrollr($('#postits'), [[0, 'top:470px; left:70%; display: block;'], [200, 'top:700px; left:200%; display: none;']]); setSkrollr($('#cup'), [[700, 'top:640px'], [1800, 'top:-500px'] ]); setSkrollr($('#map'), [[0, 'top:530px; left:73%; display: block'], [200, 'top:700px; left:200%; display: none; ']]); setSkrollr($('#calendar'), [[0, 'top:500px; left:22%;display: block'], [300, 'top:740px; left:-200%; ']]); setSkrollr($('#monitor'), [[0, 'display:none'], [100, 'display:block; top: 100%'], [300, 'top:11%; position: fixed'], [700, 'top:11%'], [1600, 'top:-100%'] ]); setSkrollr($('#headline'), [[700, 'top:90px'], [1800, 'top:-400px'] ]); setSkrollr($('#desk'), [[700, 'top:560px'], [1800, 'top:-500px'] ]); setSkrollr($('.toplink'), [[0, 'display:block'], [10, 'display:none']]); skrollr.init({ smoothScrolling: false }); I can change the size of the images based on screen resolution using CSS Media Queries and "scale" to reduce the size of the images as the screen width decreases. But right now things are POSITIONED using that skrollr helper function above and I can't change the positions based on screen resolutions. In other words, whatever position I specify in the helper function is the position always. So I can say start the map 85% from the left and it will always be 85% from the left regardless of screen size. So visually it starts in different spots, i.e. if things are positioned OK on a 1920 monitor, when you go down to a 1024 monitor, things are not ideally positioned. It would be a lot of work, but if I could adjust starting/ending positions in media queries, I could make things look perfect at pretty much every resolution. Anyone know if this is possible? I'm new to Skrollr so may just be missing something. Or if anyone has other ideas on how to do this animation easier/more efficiently, please let me know. Thanks!
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.