Jump to content


  • Content count

  • Joined

  • Last visited

About Fee

  • Rank
    Forum Newcomer
  • Birthday 02/12/1992

Users Experience

  • Experience
  • Area of Expertise
    I'm Learning

Profile Information

  • Gender
  • Location
  1. Fee

    Div Height

    It might be beneficial to produce the layout you are looking for graphically, in something like Photoshop/GIMP/Paint. Because at the moment I am not fully understanding what it is you want to achieve. If you can show me the structure you'd like, I'd gladly mock something up. Off the top of my head, if you want divs side-by-side with equal height, Flexbox is the way to go.
  2. Fee

    Identify Input ID

    $id = $('#myform input').map(function() { return this.id; }).get(); This, I hope, should return the ID of any input element in your Form, if you have multiples it will return an array of IDs - but I think you just have one that dynamically updates, right? I'm at work, so I cannot actually test this. I hope it works for you. If you have multiple input elements, you will need to target the element based upon something like class, as Lyndsey suggested.
  3. Fee

    Enlarge Images When Mouse Hover

    You are using an internal stylesheet; everything inside the <style> tag is CSS. With regards to the mark-up you have posted you are applying the styles to a div element. Look at the div underneath the "Hover over div element" paragraph: <div class="zoom"></div> - this is the green rectangle. You are applying the CSS class Zoom to this element. To swap it out for an image, simply replace this div with an img tag and apply the zoom class: <img class="zoom" src="your_url_here" alt="your_alt_here" /> However, you should seriously consider fisicx's point-of-view. This really isn't taking into account users with touchscreen devices and they make-up a huge portion of your user base. What is the purpose of this image zoom? If it is providing some sort of essential functionality, you probably need to re-think it. There is a methodology in web design known as Progressive Enhancement. Essentially, what this means is that you need to start with a rock-solid foundation that provides ALL the functionality to ALL users and then you can start to build additional enhancements that target specific visitors, that offers an improved experience i.e. things like hover effects. Now, the pros and cons of this methodology are another topic altogether, I would usually start with a mobile first approach and if I couldn't find a way to deliver an aspect of a website's design to everyone, I would drop entirely or find another way to achieve it. Regardless, you need to ascertain whether this hover element fits into the first category of essential functionality, or could be deemed a progressive enhancement. If it is the first category - I would abandon it, if it is the second category, you could probably get away with it, however I still personally wouldn't recommend it. Onto fisicx's second post, his solution here is also good, you need to contain the zoom, my implementation in my first post was quite lazy, fisicx's is the one you want if you do decide to go-forward with this. You really just need to copy the code from the code pen and paste it into the right-place in your mark-up. Taking some time to understand what is going on is beneficial too however. Rename your zoom div to have a class of "item" - which matches the class of the CSS setup in the code pen. This DIV is essentially going to be a container for your image element. inside this div insert your image, you don't need to specify a class for it. The rest of the code you'll need to copy to your internal styles, inside the <style> tags. The first part (*) applies these styles to all elements on your page. The box-sizing property defines how the width and height of an element is calculated, basically, do they include padding/borders or not. The next section of the CSS (.item) is applying styles to the container element. Here you are defining a relative position, a width, some margins and a border and crucially an overflow: hidden, this is what contains the image as it grows. The final two sections .item img and .item:hover img apply styles to the image element within the container (.item) and setup the hover styles for this element. You are basically saying all images within the .item div should transition for 0.3s (i.e. it should take 0.3 seconds to complete the transition) - that transition being the increase in scale which is defined in the hover styles. You'll notice it is defined multiple times with different prefixes (-moz, -webkit) this is to ensure cross-browser compatibility. To summarise, just copy and paste the code from the code pen in fisicx's post. Copy the HTML into the body of your document and include the image you want to zoom in inside the .item div. Copy and Paste the CSS within your <style> tags.
  4. Fee

    Enlarge Images When Mouse Hover

    Not exclusively with HTML, you could however use CSS and avoid JavaScript. Browser support for transform is pretty good - the only prefix you will need is for Opera: -o-transform:scale(1.5);
  5. Personally, I would use flex-box to achieve the layout. Check out the following tutorial, it should explain how to achieve the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ iirc flex-box has been supported since IE 11.0 or so, all of other browsers should manage it no bother too. With regards to the actual functionality - I doubt you'd find a plugin to achieve that exact functionality. It shouldn't be too hard to do though, depending on your JavaScript capabilities. I've done a quick hack-up of some functionality, basically just an index page with four images. Each has an ID which is passed to a JavaScript function, there is four corresponding DIVs which are hidden by default on load. When an image is clicked the JavaScript function will show it (with some animation) and hide the others, so only one is showing at a time. There's a next and previous link, that'll loop-back too. It's not pretty but should be a decent enough starting point:
  6. Fee

    Zoom to image coordinates?

    No, I doubt there is software solution to this problem to be honest. I'd be happy to build it for you, for a reasonable price, wouldn't take me much longer than an hour I'd wager. But, we would need to discuss your exact requirements. Drop me a message if that's an option.
  7. Fee

    Zoom to image coordinates?

    I'm not sure why you would want to replicate that exact design. In my opinion it is pretty poor. If you want to show or hide content on click, your best is JQuery: http://api.jquery.com/show/ Have a look at the documentation for this, you should be able to adapt this to fit your needs. You will need to put the target of the action as your graphic slices, then show/hide the respective information, depending on which is selected. JQuery has easing effects too, if you want to animate the transitions between content: http://api.jquery.com/slidedown/
  8. Fee

    Smooth Wavy/Skew Background Sections

    I think SVG would be the way to go. Using the border-radius property would be a possibility, but since as far as I know it isn't possible to create a double curve in CSS, you would need multiple pseudo elements to achieve this. You might even be able to do this using a radial-gradient as a background image, but again I would suspect you would need pseudo elements. It's actually quite a tough shape to create, I had a go using the two CSS methods I mentioned above and couldn't get that close. The background gradient on the other hand is no problem. Use a linear-gradient property on a background image, as seen here: Code Pen Linear-gradient is supported by most if not all browser I believe.
  9. Fee

    Blur hover effect

    Without seeing your code it's quite difficult to make a suggestion. I'm assuming you will need to target the image itself, rather than the div. Post your code inside the code tags or dump it at the link below and people will be able to help much more effectively. https://codedump.io/
  10. I should probably note that the solution I provided is outdated, it uses AngularJS. The more recent framework is just known as Angular. If you're going to start going down an Angular route, it'd probably be better to focus on the more recent framework. The following tutorial should help: https://scotch.io/tutorials/routing-angular-2-single-page-apps-with-the-component-router I would still give Angular a chance, in terms of job opportunities it is still miles ahead of React and has a bigger community to get support from (a result of being an older technology). A lot of the problems have been addressed in the move from AngularJS - Angular and although it's nowhere near a perfect tool (neither is React) it's still a strong tool to have in your arsenal. I reckon you should check out this article, give it a chance http://blog.techmagic.co/angular-2-vs-react-what-to-chose-in-2017/
  11. Fee

    Chrome Extension to Capture Open Tabs

    Okay - I've had some progress. I was hoping some people here might have some ideas on how to proceed. The extension can capture all the open tabs and save this to a user's local file system as a .bat file - using FileSaver.js. However, this just feels a bit... unethical. Rightly so Chrome gives a security warning prior to the download. I'd really like to generate a HTML file on the fly with inline JavaScript used to open all the captured URLs, this could then be saved to the user's local file system. This method, however, is impossible due to Chrome's pop-up blocking methods. Can anyone think of a smart way around this? Next step, once this is solved, is to incorporate an interface for naming the file prior to download. Anyway, if anyone is interested, here is the code: background.js // background.js var activeSession = []; // Called when the user clicks on the browser action. chrome.browserAction.onClicked.addListener(function(tab) { //Tab query with no parameters, returns all open tabs. chrome.tabs.query({}, function(tabs){ //For each tab push to active session array tabs.forEach(function(tab){ activeSession.push(tab.url); }); }); //Second query return active tab - neccessary to call content.js chrome.tabs.query({active: true, currentWindow: true}, function(active) { chrome.tabs.sendMessage(active[0].id, {session: activeSession}, function(response) { console.log("Saved"); }); }); }); content.js //content.js var date_time = new Date().toLocaleString() var fileName = "captured_tabs-" + date_time; chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { var tabs = ""; console.log(request.session.length) for(var i = 0; i < request.session.length; i++){ tabs += "start chrome.exe " + request.session[i] + "\n"; } var blob = new Blob([tabs], {type: "text/plain;charset=utf-8"}); saveAs(blob, fileName+".bat"); });
  12. Looking for advice from a JavaScript wizard to confirm whether an idea I have is possible. Basically I am looking to make a Chrome extension that captures a browser session i.e. all the open tabs and saves this as a file on the user's local file system that can be executed to restore the browsing session. Similar to bookmarking - but the user could effectively bookmark a number of related websites and restore them in one click. I'm at a loss at where to start with this, does anyone have any insights? Is this even possible to achieve in JavaScript? Similarly, is it possible to save a browser executable that opens multiple tabs?
  13. Bit of a late reply, so I hope you're still checking this. If you're just getting into Angular definitely check out Scotch.io they have great tutorials. So, routing with Angular is actually really intuitive if you are familiar with an MVC architecture, it's a lot more simple than achieving the same thing with AJAX calls. For example: This would be the simplest file structure to make a really basic one page app: - script.js: Put all your angular code here. - index.html: Your main page where the views will be injected. - home.htm: The last three are your views. - page2.htm - page3.htm So, to start with inside index.html, set up your basic page structure and things that'll be present across your app i.e. your navigation and that kind of thing. Make sure when you are linking to a view to put a # in front of the URL i.e. href="#page2" - Make sure to define your angular app in the opening HTML tag. - And set the default controller you want inside the body tag, other controllers will be dealt with by Angular's routing service, seen below. <!DOCTYPE html> <!--Define our angular app--> <html ng-app="myApp"> <head> <!--Load Angular--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> <script>script.js</script> </head> <!--Set the default controller--> <body ng-controller="homeController"> <header> <nav> <ul> <li><a href="#home.htm"</li> <li><a href="#page1.htm"</li> <li><a href="#page2.htm"</li> </ul> </nav> </header> <div id="view"> <!--Inject views here--> <div ng-view></div> </div> </body> Inside script.js you'll need to create the Angular module and controllers. Let me explain what's going on here: - First you create the module and name it something more appropriate than myApp hopefully and include ngRoute for all the view injecting. - Next you start to configure the routing using angular's $routeProvider. Specifying when a specific URL is accessed which template (the view file) and which controller to use. - At the bottom we define a controller for each page and set a scope variable of scope.message equal to something for testing purposes. //Create your module including the ngRoute. var myApp = angular.module('myApp', ['ngRoute']); //Start to configure your routes. myApp.config(function($routeProvider){ $routeProvider .when('/', { templateURL: 'home.htm', controller: 'homeController' )} .when('/page1', { templateURL: 'page1.htm', controller: 'page1Controller' )} .when('/page2', { templateURL: 'page2.htm', controller: 'page2Controller' )} }); //Create a controller for each view: myApp.controller('homeController', function($scope) { $scope.message = 'Home page!'; }); myApp.controller('page1Controller', function($scope) { $scope.message = 'Another page!'; }); myApp.controller('page2Controller', function($scope) { $scope.message = 'And one more...'; }); Finally you just need to make your views. For example: - {{ message }} will print the value of the scope variable message, in this case "Another Page!" <!--page1.htm--> <h1>This is the view rendered for page 1!</h1> <p>{{ message }}</p>
  14. Over the last couple of weeks I've been getting my feet wet developing some full stack mean solutions to some ideas I've had floating around for a while. In the past I've exclusively approached problems with a typical LAMP stack solution. Personally, I wouldn't class myself as a designer or as a developer. I just sort of dabble in both, learning what interests me at any given time. Now, I realise at some point in the future I am going to have to make this distinction and focus primarily on one or the other if I want to pursue this in a professional capacity. With that in mind, does anyone have experience with the MEAN stack and the workflow that would exist between a team of designers/developers. Because it seems to me that it blurs the line between the professions significantly. Or would a full stack developer be its own niche entirely? With that said, I would have to say my experience with this so far has been pretty positive. And I would be interested to know what others think? I particularly like the MVC architecture that angular allows you to follow. In contrast, mongoDB is weird, but it's probably because I've never touched anything noSQL before this and can't throw off the relational data model. Or it could simply be that what I've trying would be better suited to a RDBMS, I don't know. I've heard as well, that one major problem AngularJS faces is poor SEO performance. I don't have a great understanding of the implications of good SEO so I wonder if anyone could clarify this? I'd also like to discuss the future of these technologies, does anyone think that the demand for mean technologies will increase, or is it more of just a fad? And in long run it would be better to focus on more established languages like Ruby and Rails? Or, am I constraining myself a bit by pushing everything into one stack or another? Should I instead by focusing on each framework and what it can do exclusively. Then approach each project with what works best in that scenario, for example AngularJS might be a good fit, but a mySQL database would serve better, so breakaway from an established stack and use each technology based on its own merit. Is this the right approach? I know I'm rambling a bit here, so apologies. It's just a compilation of some thoughts that have occurred to me recently.
  15. Fee

    Noobie questions

    Please do. I'm happy to put together some stuff for a drop down menu too, but I see little point in reinventing the wheel so to speak when it has been done hundreds of times before and probably to a higher standard than I am capable of. I did actually consider marking myself as intermediate, but there is so much to learn that I feel I have barely scrapped the iceberg. It's essentially just where I see myself, we all have our own views on where we are versus where we would like to be. And with that in mind I still consider myself as someone who has a lot to learn.