Jump to content

Search the Community

Showing results for tags 'jquery'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


Skype


Location


Interests

Found 178 results

  1. I'm not all that great with Javascript and I might just be having a dense but I can't work out how to run an object method from a jQuery event handler. var myObject = Object.create(Parser); myObject.init(); myObject.registerEvents(); $("#button").click( myObject.registerEvents ); What the function does is copy the html in a textarea into an iFrame. Alternatively finding a way to update the rendering in the iFrame of the changed textarea's HTML.
  2. Hello, hi Guys. I just want to know which must have js libraries do i need to get for a modern website. I thought about a parallax lib to make my site more lively, but i couldnt find a good one. So..., just link your choices for a modern js libs down below 👍😉
  3. Hi, I have a PHP array of all folders in a directory, and creating a list of divs from them all with a specified class. I have this jQuery script (CodePen link) that just simply requires me to specify the class of what elements I want to paginate, as well as have a place holder element for the pager below. That works fine. No other things needed. But as of right now, this is a very basic script where the pager numbers just keep adding up. What I want to add is the previous/next/first/last buttons as well as say a limit of 5 numbers shown. How can I add this to the script or is there any scripts with this already, that work just as simply like this, just dynamically paginating content of a specified class without doing anything more? All I can seem to find are scripts requiring bootstrap, databases, editing the html to differ each item or putting the dynamic content into the javascript file. Thanks, Jase
  4. Hi all, I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like: - to be able to have images of different heights and widths, not all the same size (as it is now). - vertically/horizontally centered. Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/ Thanks! HTML: <div id="contentwrapper"> <div class="centreme"> <img src="https://picsum.photos/200/200?image=1" id="animation" /> <img class="hidden" src="https://picsum.photos/200/200?image=1" /> <img class="hidden" src="https://picsum.photos/200/200?image=2" /> <img class="hidden" src="https://picsum.photos/200/200?image=3" /> <img class="hidden" src="https://picsum.photos/200/200?image=4" /> <img class="hidden" src="https://picsum.photos/200/200?image=5" /> <div id="bottommark"></div> </div> </div> CSS: body, html { height: 7000px; margin: 0; background-color: grey; } .hidden { position: absolute; top: -9999999px } #bottommark { position: absolute; bottom: 0; } #contentwrapper { width: 100%; height: 100%; position: fixed; } .centreme { position: fixed; width: 200px; /* the image width */ height: 200px; /* the image height */ top: 50%; left: 50%; margin-top: -100px; /* half the image height */ margin-left: -100px; /* half the image width */ } JS: $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });
  5. I created my first website. Please tell me, what can I change and improve? http://mario89.smarthost.pl/
  6. 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!
  7. Hi guys, I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly: General Stuff: http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site. Javascript: You Don't Know JavaScript - https://github.com/getify/You-Dont-Know-JS JavaScript scene https://medium.com/javascript-scene Webpack Asset bundler https://webpack.js.org/ Jest, Automated tests for JavaScript https://facebook.github.io/jest/ CSS: http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts. CSS Wizardry: https://csswizardry.com/ Sass Guidelines https://sass-guidelin.es/ Responsive Design: http://www.getskeleton.com/ - Responsive Grid. Nebula - a framework built by WDF member, rbrtsmith: https://nebulaui.github.io/nebula/ Server-Side Coding: http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP! Form Validation (Client-Side): https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do Lyndsey.
  8. asomanikofi

    Confusion

    Issue:1 I am using juqeryui widgets to create section tags which contains data from an external json file I have attempted to style the data that is printed out however the text will appear on the right handside of the image for some entries while other ones pieces of text just filter down to the bottom of the page How do I go about fixing this issue? DisplayHoliday.css HolidayForm.html
  9. predatorx

    EasyAutocomplete Plugin Help

    Hello all I am trying to use the jQuery plugin EasyAutocomplete, but I have run into an issue. I have the plugin working in test from a json file which is fine. What happens is when the user types in a search, the search list filters and the user can click on one of the dropdown enters and be taken to another page. This is working as intended. My issue is that I have a submit button and when the user selects there search term, the submit button does not do anything. You also cannot select a search term by typing in the input field and pressing enter to be taken to that page. I would like the user to be able to go to the next page by either typing in the input field and pressing enter, pressing the submit button or clicking the link they want to use. You can view the test that I have mocked up here. Can anyone help with this? If more information is needed I can try to provide it? Thanks
  10. Hey all, So I'm extremely new to this website - this is my first post. I come to with a problem, well, more of a question. Currently I'm working on my website for my final first year project for my web development course. I need to use JavaScript and jQuery (fine) but the problem I'm having is I don't even know where to start. The outline of what I want to do is this: - Single page design - Each page is tabbed, like a folder, one behind the other - Animated with JS / jQuery, e.g. as you hover over the tab it pulls it out a little and highlights it. That I can do myself or find out how to do with relative ease. So, I'll include some pictures of my designs. Any suggestions as to what I should look into or research would be greatly appreciated - I'd prefer to learn than copy / paste so I'm only asking for advice (which I'm sure is what is expected anyway ahahaha). Anyway. Have a great day and thank you for your time. This is due for the 8th of January, as an idea of timescale. http://imgur.com/9pRZD5r
  11. What I want is to click any <li> in a <ul>, and then affect ALL elements with the same class on the entire page. $("anyclass").click(function(){ $("anyclass").hide(); }); I don't want to manually enter the element classes, as the client can add additional items to the list and their class is a random ID. I feel like it should be a very small piece of jquery but I can't think for life of me.
  12. ***Sorry didnt mean to duplicate post*** I have copied the menu from: www.bootsnipp.com/snippets/featured/mega-menu-with-tabs-navigati‌​‌​on you will notice that when you drop the screen size down to mobile/tablet width that the menu forms an accordian dropdown. The top dropdown works fine at first - opens within the accordian... however when you then select a different tab at the bottom - men, women etc... instead of changing within the same area, it opens a dropdown at the bottom of the list does anyone know how to stop this? I have removed the below CSS code and it works fine when inspecting element. but not sure how to do thismyself as the code comes from Bootstrap CSS. Also the code is needed for fullscreen/desktop view. only seems to cause problems on mobile/tablet. although it may be something else which i have not found which is the problem .dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0px 6px 12px rgba(0,0,0,0.175); } any help would be great
  13. I have copied the menu from: www.bootsnipp.com/snippets/featured/mega-menu-with-tabs-navigati‌​‌​on you will notice that when you drop the screen size down to mobile/tablet width that the menu forms an accordian dropdown. The top dropdown works fine at first - opens within the accordian... however when you then select a different tab at the bottom - men, women etc... instead of changing within the same area, it opens a dropdown at the bottom of the list does anyone know how to stop this? I have removed the below CSS code and it works fine when inspecting element. but not sure how to do thismyself as the code comes from Bootstrap CSS. Also the code is needed for fullscreen/desktop view. only seems to cause problems on mobile/tablet. although it may be something else which i have not found which is the problem .dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0px 6px 12px rgba(0,0,0,0.175); } any help would be great
  14. Hi, My first time back here in several years I think, hope everyone is OK!? I have (small) WordPress issue at the moment and just cannot find a solution. I know it is possible, as I have seen it done many times and am also following (or attempting to) this article here; https://www.bobz.co/filter-wordpress-posts-by-custom-taxonomy-term-with-ajax-and-pagination/#comment-4215 So, basically, looking at the attached screenshot we have a WordPress loop that loops through posts in a custom post type ('project'), outputting various data. Simple enough, no issues here. Below that, in a show/hide div (again, no problem here) I need to show a filter, whereby a user can select one, or multiple filters (custom taxonomy terms, 'projectcat') and have the loop update in real time, on the same page. This is where the issue is. Following the guide mentioned above, this is what I get (see doh.jpg). Something clearly isn't working here, and I've tried the default WordPress 'post' type, as well as my own custom post type. Has anybody here done this before? Can you point me in the right direction? Happy to provide code snippets etc. Thanks in advance!
  15. Hello, I'm trying to code the creation of 'sticky notes' on a webpage with a contextual menu right-click option. I nearly have it working, but there are a couple of things I cannot seem to figure out (I've been trying for a couple of weeks now!). I'm very new to web development (beginner level). I've combined some code for the sticky notes and context right-click menu. The problem I'm having is that when the page loads for the first time, a sticky note appears: I do not want that to happen. I would like it to initially load with no sticky notes visable, and only make them visable once they are added, or if they were previously added and automatically saved (which is already part of the code). So I used `display: none` to hide the css "note" element. However, if I do that then when I right-click to add a note it doesn't show up at all. So I understand I need to tell it to show if it's been created by my right-click menu option, but I've been struggling to understand how to do this. The second issue I have is that the sticky notes are created in random positions; whereas, I would like them to show up next to where I have right-clicked. Please could someone point me in the right direction? I apologise for my lack of basic knowledge. I've attached my current version. Many thanks. stickies-context-menu.zip
  16. Hi Everyone I hope you're well. I've been trying to work out how to make a video player with a playlist for the project that I'm working on. Their doesn't seem to be many tutorials on this and was wondering if someone on here could help me out? I would like to make something similar to this https://cdn.athemes.com/wp-content/uploads/onplay-video-magazine-theme.jpg If anyone can help me out it would be much appreciated. Thanks!
  17. Hello Everyone, I hope you're well. I'm trying to make a full video background design with a section below it when you scroll downwards.Using a tutorial, I know how to make the full video background but whenever I try to add a section below it it either stays at the top of the page or margins etc start to glitch and it becomes a mess. I was wondering if anyone could help me out? HTML <!DOCTYPE html> <html> <head> <title>Video Background</title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width"> <link rel="stylesheet" href="./css/main.css" type="text/css"> </head> <body> <div class="background-wrap"> <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="kids.mp4" type="video/mp4"> Video not supported </video> </div> <div class="content"> <h1>header</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ante massa, eget ultricies nisi accumsan quis. Fusce volutpat turpis vel diam vulputate,</p> </div> </body> </html> ----------------------------------------------------------------- CSS * { margin: 0; padding: 0; } body { font-family: Calibri, sans-serif; } .background-wrap { position: fixed; z-index: -1000; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } #video-bg-elem { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } .content { position: absolute; width: 100%; min-height: 100%; z-index: 1000; background-color: rgba(0,0,0,0.7); } .content h1 { text-align: center; font-size: 65px; text-transform: uppercase; font-weight: 300; color: #fff; padding-top: 15%; margin-bottom: 10px; } .content p { text-align: center; font-size: 20px; letter-spacing: 3px; color: #aaa; } ---------------------------------------------------------------------------- Thank you
  18. Hi I have an HTML site I'm building. It uses jquery for bxslider image slides and slicknav responsive menu. I have created normal anchor tag links from the gallery page (http://ettifordcottages.co.uk/newsite/gallery.htm) to the page with the property descriptions (http://ettifordcottages.co.uk/newsite/cottages-and-booking.htm) and these links are all jumping to the bottom of the targeted page, rather than the anchor tag. If I remove the bxslider, then they link correctly, so seems to be the bxslider causing the problem. There are also links from the property desc page to achors on the gallery page. This work OK as bxslider is not being used on this page - I am using a gallery but it's the camera jquery one. The Javascript is being loaded thus in the header : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/jquery.slicknav.js"></script> <script src="js/jquery.bxslider.min.js"></script> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'fade', speed: 1500, pager: false, auto: true, pause: 4000, autoStart: true, controls: false, captions: true }); }); </script> The slicknav function is being called just before the closing body tag: <script type="text/javascript"> $(document).ready(function(){ $('#menu').slicknav(); }); </script> </body> I have googled this endlessly but can't seem to find anyone who's had the same problem! I'm not a Javascript coder at all and I'm hoping someone may be able to see what the problem is and how to fix it, or at least some suggestions of things to try as I've completely run out of ideas. Thank you for any help Jennie
  19. Nexstair Technologies says hi to everyone on the forum .Nexstair is in the world of software technology from Feb 2009 .The services offered by Nexstair are web designing, PSD TO Responsive HTML, Web development ,WordPress, logo making,PHP, JQUERY, javascript, newsletter making, etc. To see our portfolio click here : http://nexstair.com/portfolio/
  20. Hello all, my name is Robertin (Robbie) Datkov. I'm a student at the Treehouse Academy and undertaking courses in Web Design and Front-End Development. This is my personal portfolio: http://robbiedatkov.com I hope I can have good time with you all and help whenever I can!
  21. Hi, My site is http://www.shivampaw.com and I was wondering if you could provide some feedback on it's design and functionality? The About page and the Work page aren't done yet and the services page is half completed. But what do you think about the overall design and functionality so far and how can I improve it it further? Thanks!
  22. I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/ I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesnt scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then The problem is to do with: $default_cover_width = 918; $default_cover_height = 276; As the screen size changes the default cover size changes as well... I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well. Thanks.
  23. Hi i'm a pretty experienced front end developer with excellent sass, less, css, javascript, jquery, html, grunt etc. Now when i want to achieve some interaction that can't be done in plain html, css i turn to jquery/javascript for user triggered events and ajax and this has served me well and still feels like the standard for web development. However i feel i need to learn a Javascript framework but i'm not sure what type of projects i would pick angular 2 over Jquery. Can i use it to build websites or is it just for apps? i was thinking of doing a portfolio site using angular but this seems over kill. Can someone shed some light on this with some examples
  24. zaflondon

    Direction & Advice Needed

    Hello there, I desepreatly need a a bit of direction over how to change & add functioanlity (from JQuery) to bootstrap framework used a directoy software called brilliant directories. I would much appreciate a bit of direction or advise. Many Thanks in advance.
  25. HI I have created a responsive dropdown where at 580px my menu bar becomes a drop down. The problem im getting is when the menu drops down, the image slider underneath it is blocking the menu. I need my image slider to go underneath my dropdown menu when i open it. Print screens below of my problem.
×