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. 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.
  2. 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);
  3. 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:
  4. 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.
  5. 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/
  6. 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.
  7. 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/
  8. 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/
  9. 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"); });
  10. 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?
  11. 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>
  12. 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.
  13. 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.
  14. My Portfolio

    I don't know if everyone will agree, but I personally dislike those skill bar sliders everyone seems to use and you've included on your homepage. Firstly, what is the actual meaning it gives? There is no unit or metric, what does 9/10 Python actually mean? 9 years? 9/10 of the way towards mastering Python to the extent that is humanly possible? If so, that's pretty impressive. It has no actual demonstrable value to a potential client. Incidentally I should also point out that I naturally read those things in reverse order, so you've really only pointed out your weaknesses not strengths. Also not to mention how heavily it depends on individual perspective. I doubt two people would ever truly agree on what being 7/10 in CSS actually entails, it's arbitrary. With that said, the overall design isn't bad. The massive Contact Us image seems a bit out place and too big. I'd be inclined to half the size and stick with the font used in your name in the header, rather than an image.
  15. Noobie questions

    Try not to let CSS intimidate you, I understand it can be pretty overwhelming getting started/coming back after a long period of time. A good plan is probably first to get the basics of linking up a stylesheet understood. And then from there understanding how this effects your html. Have a read of this: https://www.tutorialspoint.com/css/what_is_css.htm Once you've followed through some of the above tutorials, working with a background image is probably actually a good way to get your feet wet with CSS. Mainly because (if you do it the right way) it will introduce you to different selectors and some browser compatibility prefixes. Anyway, take a look at the following CSS: html{ background: url(img/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } The first thing I will point out is that the second line, in which you declare your intended background image would in and of itself suffice to create a background image. However the above CSS is a good way of ensuring the background image will cover the entire browser window, dealing with different screen sizes, devices etc which is half the battle when it comes to building websites these days. Secondly, you will notice we are applying this style to the html element, rather than the body element, which may have been what you expected. The reason for this is that the body element doesn't immediately take up the entire height of the viewport whereas the html element does. To specify which image you want to use, simply declare a background: url() and paste in the directory path to your desired image within the parenthesis. If your stylesheet isn't in the root folder in relation to your images, you can begin the path with ./ to return to the root directory. Then we apply some values to our background property. Firstly, no-repeat, this ensures our image isn't repeated in a tile like fashion. Next we position the background image. By default it will start at 0, 0 (the top left). Since we are intending to cover the entire screen we need it positioned in the middle, so we specify center center to ensure it is placed 50% horizontally and vertically. Finally we specify the background-size: cover; The background-size property in CSS is really useful, but also a bit complex. If you feel like it, read up on it a bit. But for this I'll suffice to say specifying cover ensures the image will stretch to fill the container whilst maintaining width/height aspect ratio. You'll notice we've declared this four times, with different prefixes at the start. We do this to ensure different browsers support our cover. Webkit covers chrome, Android, iOS and safari I believe. moz covers Firefox and o covers opera. I believe microsoft browsers support it directly, but if not we can use the -ms- prefix. With regards to a dropdown menu, this is a bit more tricky, and is probably beyond the scope of what I could explain in a single post. My advice here would be to use Google. There is quite literally thousands of tutorials on dropdown menus, some will involve the use of JavaScript, but if you don't want that Googling something to the effect of "Pure CSS Dropdown Menu" will be a good starting point to research. I hope some of this will be helpful, as I said don't let yourself become overwhelmed with the amount of things there is to learn, these things take time and no one ever stops learning and improving. If it's too much just grab the first line of code and it will suffice to begin with.