Jump to content

Fee

Members
  • Content Count

    31
  • Joined

  • Last visited

About Fee

  • Rank
    Dedicated Member
  • Birthday 02/12/1992

Users Experience

  • Experience
    Beginner
  • Area of Expertise
    I'm Learning

Profile Information

  • Gender
    Male
  • Location
    Scotland
  1. Fee

    CSS Div in dropdown not displaying correctly

    Give all the DIVs an identical class. On click, use JavaScript to toggle a hidden class on all DIVs with the same class, to hide all the DIVs. Then build in an exception that doesn't add the hidden class to the DIV that fired the event - i.e. the one that was clicked.
  2. You'll need a server side scripting language to query the database such as PHP. MySQL would certainly work but there are numerous other considerations such as sanitizing input/protecting against SQL Injection to name one. I'd suggest start at the beginning and try to find a decent tutorial covering each of the WAMP (Windows, Apache MySQL, PHP) stack elements individually. If you install PHPMyAdmin with this stack you'll have a web based control panel for easy database interaction.
  3. Fee

    React and Vue - Opinions?

    Building something similar in both frameworks is a good idea, thanks for that. I have a todo app built in Node just using JQuery on the front-end, so I'll likely make a frontend in Vue and React. Why is there much hype surrounding Cordova if it's so poor? I mean, I get it will never perform as well as a native app, but I thought it was still a viable option for small - medium apps? I will certainly look into React Native though. Cheers for the advice.
  4. Fee

    React and Vue - Opinions?

    So, I've got some spare time on my hands over the next few months and I would really like to spend it working with a front-end framework. I've spent the last 3 - 4 months getting more comfortable with Node, and want to expand this by building on my front-end skillset. I used to be pretty big on AngularJS, but I've moved away from that recently and would like to focus on something a bit more up-to-date. I am torn between spending some time getting to grips with Vue or opting instead for React. I appreciate that React has more employment potential, but this is really just for my own benefit. What I am struggling with, is trying to find a balanced opinion on what the pros and cons of each framework are. So, I am wondering if any of the members here have spent time in each framework, and could provide some opinions on the benefits/drawbacks of each? Down the line, I want to move into Cordova development. My knowledge of Cordova is at this point totally lacking, so I might be misunderstanding it entirely but I wonder if a specific framework would be more suited toward this? If so, that would be a big selling point for me. Any thoughts on this would be most appreciated.
  5. I'd be inclined to use a ready-made solution. It's going to perform better and be much easier. I've used SCEditor in the past. It's fairly decent: https://www.sceditor.com/ It comes with loads of options (buttons on the toolbar). If you only want the ones listed above, check out this page on the documentation to limit the options: https://www.sceditor.com/documentation/options/
  6. Fee

    Design website for travels

    My first question would be, how does this differ significantly from the services Google provides via their Maps functionality? All of the features you've listed above are currently available: I can search for a City and I can read about all the different things there is to see and do. This is linked in with Google Reviews/TripAdvisor. So, I can read what others are saying, see photos, consult opening times and pricing. I can also do searches based on what is Nearby. For example, consider I was at a conference in Berlin at the Berlin Congress Center, I could have Google provide me with a list of hotels in the vicinity, view the reviews, check out the prices, and be linked directly to the hotel's website to make a booking. Maps also provide route planning, so I can get around easily. In one-click, I can toggle between driving, cycling, walking, trains or buses. This provides me with a detailed route, time and distance. I can also download the instructions straight to my device, for offline use. If I need to use a train/bus, I am provided with the service number and a link directly to the provider so that I could buy tickets online. What your proposing is a serious undertaking, and it would be extraordinarily difficult without programming experience. I think even one developer would struggle with a project this size. Beyond that, however, an even greater challenge would be collating all of the data you would need to make this usable. Where are you going to get the maps of all the cities? The train/bus timetables, all of the information about things to see and do? There is only one repository that I know that could provide this, and that is Google Maps, and as I said they already offer all of these features. So, you'd essentially be re-building Google Maps using Google's various APIs. I don't want to dishearten you, it seems you have a project which you are excited about, which is really cool. However, for me, the first step in any undertaking is to scope out what has already been done. I would then gauge the suitability of the project based on that. For example, are there any glaring issues with the current solution? Could I bring something new to the table? And a bunch of questions of that nature. In this case, I think you would struggle to improve upon the solutions already available. Why not consider creating a travel blog? You could write about all of the places you've been, the things you've seen and experienced, plus provide useful insider knowledge and tips to people looking to travel to the places you've visited. That is is something that would be of value to visitors. Providing your content is interesting. It's also something that will be much more achievable without having a programming background. Find yourself a decent free WordPress theme (there are hundreds out there) and you're good to go! If you like the idea of having maps of cities where you can provide your own insights, you could use Google Map's API. Embed a map in your website, create your own custom pins for places of interest, with your own content. You could place this on your blog's homepage and have each pin contain some useful info, and then a link to full blog post about your experiences.
  7. Fee

    Go to ID button scroll effect

    Can you dump your entire code here? I'll take a look at that for you. Based upon your description I'm not fully sure what you are trying to achieve, but I am struggling to understand why you would want to make a user click twice to interact with a button? That'd annoy the hell outta me, personally.
  8. 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.
  9. 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.
  10. 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.
  11. 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);
  12. 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:
  13. 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.
  14. 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/
  15. 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.
×