Jump to content

Cloudfordream -  NabboHotel -  CloudCMS

Bienvenue sur Habbo-Dev !

Search the Community

Showing results for tags 'js'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Habbo-Dev
    • Forum Announcements
    • presentations
    • suggestions
  • General Forums
  • Développement
    • Discussions - Développement
    • Tutos
    • Release
    • Aide & support
    • Services
  • Zone-Premium
    • Discussion générale
    • Concours Premium
    • Jeux vidéo
  • Ressources Habbo
    • Tutoriels
    • CMS & TEMPLATES
    • SWFS
    • Émulateurs
    • Autres ressources
  • Divers Habbo
  • Graphisme
  • Génération Développement's Template - Cms
  • Génération Développement's Information
  • Génération Développement's Demande de Aide
  • Génération Développement's Script Habbo & Hors Habbo
  • Génération Développement's Cours de Développement
  • Génération Développement's Graphisme & Graphiste
  • Les beaugoss !'s Sujets
  • Les beaugoss !'s Sujets
  • Habbo R63a Revival's Mobis (officiels)
  • Habbo R63a Revival's Mobis (customisés)
  • Habbo R63a Revival's CMS
  • Habbo R63a Revival's Émulateurs
  • Habbo R63a Revival's Tutoriels
  • Habbo R63a Revival's Support
  • Habbo R63a Revival's Autres ressources
  • Habbo R63a Revival's Développement
  • La famille Habbo-Dev's Sujets
  • Customisateur Art's LES CUSTOMISATEURS CERTIFIES.
  • Customisateur Art's VOS MOBIS
  • Customisateur Art's VOS BACKGROUNDS
  • Customisateur Art's AIDE & TUTO
  • Customisateur Art's Images
  • Habbo-Your's DISCUSSION GÉNÉRAL
  • Habbo-Your's TEMPLATE CMS & PAGE
  • Habbo-Your's Les règles
  • Habbo-Your's Les concours
  • Les aventures de Kameo's Les aventures de Kameo
  • Les aventures de Kameo's Les aventures de Kameo
  • Force & Honneur's Musique
  • Boîte à idées's Information supplémentaires
  • Boîte à idées's Boîte à idées public
  • KurtClub's Nouvelle fonctionnalités !
  • AliveSharesProject's Sujets
  • L'ancien temps ! Habbo & les rétros's Sujets
  • Développement & Autre Habbo's Développement & Aide
  • Développement & Autre Habbo's Discussion Général
  • Développement & Autre Habbo's TEMPLATE & CMS
  • Développement & Autre Habbo's Vos Créations
  • Développement & Autre Habbo's Language HTML CSS PHP MYSQL JAVASCRIPT JQUERY
  • Développement & Autre Habbo's Emulateur
  • TeamDev's Sujets
  • Les Développeurs HTML/CSS's Sujets
  • Les Développeurs HTML/CSS's Sujets
  • Créer Un Retro Habbo Sans Hamachi !'s Ajouter des catégories
  • Développement de Rétro's Ajouter des catégories
  • Entraide Habbo-Dev's Discussions
  • Entraide Habbo-Dev's Aides
  • En Développement...'s Ajouter des catégories
  • Les anciens des rétros's Questions
  • Les anciens des rétros's Forum
  • Les Architecte et Graphiste's Sujets
  • SkyCompagny's Sujets
  • Créateurs de sites fans's Sujets
  • Génération PHP/SQL's Sujets
  • Génération PHP/SQL's Sujets
  • Graphisme & Développement's Sujets
  • Habbo-Dev Community's Sujets
  • HabboHTML5's Forum principal
  • HabboHTML5's Suggestions
  • Créateur de rétro's Sujets
  • Les Actifs's Sujets
  • ZUNNY FAN's Sujets
  • En Développement...'s Sujets
  • En Développement...'s Membres

Calendars

  • En Développement...'s Événements
  • En Développement...'s Événements

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Localisé:


Interêts


Comment as-tu connu le forum?


Phrase perso


Je suis


Facebook


Twitter


Instagram


Snapchat


Skype


Youtube


Discord


Site web

Found 7 results

  1. Eudes

     html Buttercake

    Bien le bonjour à toi moussaillon. Avec mes matelots nous avons décidé d'aborder le sujet du fameux "ButterCake" qui est un framework te permettant de créer un navire rapidement tout en respectant l'esthétique des nouvelles technologies web. J'ai eu cette petite idée en relisant le sujet que j'avais rédigé, et qui parlait du fameux "UIKit" . Bon, bien sûr, contrairement à @ Swayn, je n'ai pas pris le temps de créer un CMS entièrement avec ButterCake, mais je dois t'avouer qu'en entreprise, ce framework est un petit plus à ne pas négliger. Avant de commencer, faisons un point : Maintenant que tu connais c'est quoi un framework, nous pouvons commencer ce tutoriel ! ButterCake est un framework CSS facile à prendre en main grâce notamment au nom des classes utilisées mais, aussi les helpers (ou utility) proposés pour vous aider à mettre en place votre layout. Je veux dire par là qu’il est presque possible de mettre en place un design sans avoir à ajouter du code CSS custom. Il est vrai que cela occasionne d’avoir des balises avec beaucoup de classes attribuées, mais au moins cela permet d’harmoniser les méthodes d’intégration entre les développeurs front. De plus en procédant de cette manière, le code CSS que vous aurez à ajouter sera vraiment q’une légère refonte du thème par défaut cela vous évitera notamment les bugs d’affichage liés à la gestion du responsive par exemple. Contenu du framework : des composants : les icônes, les overlays, les badges, alertes, boutons un système de grille performant : comprenant la gestion du responsive, les articles et les sections les éléments HTML basiques : les liens hypertexte, les tableaux, les formulaires les animations css : de simples classes à ajouter à vos éléments pour les animer la navigation : barre de navigation, offcanvas, dropdown des composants javascript : accordéon, modal, slider, slideshow Hautement customisable du fait de la possibilité de combiner les modules. Permet d'ajouter des composants au CSS sans impacter le style général. Possibilité de créer des interfaces utilisateurs poussées. Framework récent, très peu de ressources et de documentations. Avant de commencer, il te faudra ton équipement matelot, sinon, tu risques de pas faire long feu face aux têtes-grises. Sublimetext 3 Une cible projet qui t'encourage à continuer Une peinte d'hydromel de café Une boussole montre précise Comment j'inclus la librairie sur une page sans forcément devoir télécharger les fichiers correspondants ? [Hidden Content] Comment je crée un accordion ? [Hidden Content] Comment je crée des chips (badges) ? [Hidden Content] Comment je crée un tableau ? [Hidden Content] Comment je peux créer ce que je veux ? En te documentant ici. Effectivement, nous pouvons dire que ButterCake peut remplacer Bootstrap avec un peu plus de possibilités, qu'en pensez-vous ? Si vous avez envie d'intégrer les fichiers de ButterCake sur votre site, sans passer par les liens directs, voici le lien de téléchargement : [Hidden Content] En espérant voir très bientôt des rétros, des templates et/ou autres avec ce framework qui te permet facilement de créer de superbes choses ! Que la mer soit avec toi, moussaillon !
  2. Eh bah, il m'a fallu très peu de temps pour réécrire un sujet au sujet d'UIKit, je te laisse visualiser mon sujet en cliquant si tu ne l'as pas encore vu... Pourquoi je suis revenu aussi rapidement ? Parce que je dois t'avouer matelot qu'en relisant mon sujet, j'ai eu une envie soudaine de partager une template vendue normalement sur Themeforest au prix de 29$, et utilisant le framework UIKit, mais pour éviter que @ Thomas me tape sur les doigts, j'ai préféré respecter les règles d'HabboDev, dans le sens où chaque catégorie est rattachée à des sujets en particulier, mon sujet sur UIKit était un sujet tutoriel, celui-ci, est un sujet de partage. Bien sûr, si @ Thomas n'est pas d'accord pour le partage de sources payantes, alors, nous discuterons ensemble comme de vrais moussaillons autour d'un verre d'hydromel et à bord du CruiseSide afin de trouver les conditions adéquates et/ou nécessaires à ce partage. En tant que capitaine de bord, j'ai décidé aujourd'hui d'appliquer les couleurs primaires d'UIKit sur mes bannières, c'est une façon pour moi de les remercier pour leur travail remarquable qui nous permets à nous, développeurs de croisières de rêves flemmards, de créer des choses sortant de l'entendement. Mon instinct de capitaine me disait de copier-coller la description de cette template dans un traducteur puis de te la partager tel quel. Mais en tant que moussaillon je me dois tout de même de t'expliquer en bref à quoi peut servir cette template : Tout d'abord, elle contient vraiment tous les éléments nécessaires proposés par UIKit pour créer une administration te ressemblant. De plus, elle n'embarque aucune librairie externe contrairement à des templates lambda partagées gratuitement sur le net. Grâce à cette template, tu as d'immenses possibilités qui s'offrent à toi pour créer ce à quoi tu as toujours rêvé de créer, et en plus, c'est gratuit (sauf si @ Thomas me tape sur les doigts) ! J'espère avoir été assez vendeur, car je te rappel que je ne suis pas marchand d'hydromel mais plutôt consommateur si tu vois ce que je veux dire ! Ils sont nombreux, bien que trop nombreux, du coup, je vais essayer de pas m'attarder et de te résumer tout ça rapidement : Construite avec SCSS Système de construction GulpJS Grille Bootstrap BEM Naming Methodology Structure de projet ITCSS Responsive Retina Légère et rapide Adaptative Boards (Style Trello) Fil d'actualités (Style Twitter) Calendrier Messenger Tableau de projets Analytics Factures Profil utilisateur Inscription Connexion UI Kit Alertes Avatars Badges Breadcrumb Groupe de bouton Calendrier Sélecteur de date Sous-menu Divider Eléments de formulaire Téléchargement de fichier Sélection Multiple Carte de profil Etat de carte Tâches Offres et plus... Personnellement à ce jour je n'ai pas trouvé d'inconvénients pour ma part. La seule chose qui peut être ennuyante, c'est le fait de devoir naviguer, se renseigner et récupérer sur un nombre incalculable de pages ce dont on a besoin. Pour faire claire : Inutile de télécharger cette template si tu es un matelot flemmard ! Hmmm... Des screens ? Sincérement ? Non je ne suis pas d'accord, autant visualiser en live pour pouvoir tirer une conclusion plus appropriée à tes attentes ! Il te suffit donc de cliquer ! Avant de te jeter sur le lien de téléchargement, je t'invites à visiter la page officielle du produit et de son marketplace par défaut : C'est ici Maintenant, tu peux télécharger : [Hidden Content] Moussaillon, que les mouettes du Pacifique soient avec toi !
  3. Bien le bonjour à toi moussaillon. Avec mes matelots nous avons décidé d'aborder le sujet du fameux "UIKit" qui est un framework te permettant de créer un navire rapidement tout en respectant l'esthétique des nouvelles technologies web. J'ai eu cette petite idée en lisant le sujet de @ Swayn qui parlait du fameux "Materializecss" et avec lequel, il a pu créer entièrement un CMS Habbo qui lui était propre et qui a fait bon nombre d'envieux ! Bon, bien sûr, contrairement à @ Swayn, je n'ai pas pris le temps de créer un CMS entièrement avec UIKit, mais je dois t'avouer que dans l'université ou je suis, ce framework est fortement conseillé par les intervenants. Avant de commencer, faisons un point : Maintenant que tu connais c'est quoi un framework, nous pouvons commencer ce tutoriel ! Uikit est un framework CSS facile à prendre en main grâce notamment au nom des classes utilisées mais, aussi les helpers (ou utility) proposés pour vous aider à mettre en place votre layout. Je veux dire par là qu’il est presque possible de mettre en place un design sans avoir à ajouter du code CSS custom. Il est vrai que cela occasionne d’avoir des balises avec beaucoup de classes attribuées, mais au moins cela permet d’harmoniser les méthodes d’intégration entre les développeurs front. De plus en procédant de cette manière, le code CSS que vous aurez à ajouter sera vraiment q’une légère refonte du thème par défaut cela vous évitera notamment les bugs d’affichage liés à la gestion du responsive par exemple. Contenu du framework : des composants : les icônes, les overlays, les badges, alertes, boutons un système de grille performant : comprenant la gestion du responsive, les articles et les sections les éléments HTML basiques : les liens hypertexte, les tableaux, les formulaires les animations css : de simples classes à ajouter à vos éléments pour les animer la navigation : barre de navigation, offcanvas, dropdown des composants javascript : accordéon, modal, slider, slideshow Hautement customisable du fait de la possibilité de combiner les modules. Permet d'ajouter des composants au CSS sans impacter le style général. Possibilité de créer des interfaces utilisateurs poussées. Framework récent, très peu de ressources et de documentations. Avant de commencer, il te faudra ton équipement matelot, sinon, tu risques de pas faire long feu face aux têtes-grises. Sublimetext 3 Une cible projet qui t'encourage à continuer Une peinte d'hydromel de café Une boussole montre précise Comment j'inclus la librairie sur une page sans forcément devoir télécharger les fichiers correspondants ? [Hidden Content] Comment je crée un accordion ? [Hidden Content] Comment je crée un minuteur (countdown) ? [Hidden Content] Comment je crée un tableau ? [Hidden Content] Comment je peux créer ce que je veux ? En te documentant ici. Effectivement, nous pouvons dire qu'UIKit peut remplacer Bootstrap avec un peu plus de possibilités, qu'en pensez-vous ? Si vous avez envie d'intégrer les fichiers d'UIKit sur votre site, sans passer par les liens directs, voici le lien de téléchargement : [Hidden Content] En espérant voir très bientôt des rétros, des templates et/ou autres avec ce framework qui te permet facilement de créer de superbes choses ! Que la mer soit avec toi, moussaillon !
  4. Eudes

    js Ckeditor

    Moussaillon, passes-tu un bel après-midi ? Je suis actuellement sur le Victoria, et je suis tombé par hasard sur un coffre qui pourrait t'intéresser, quelque chose de simple mais d'efficace ! Aujourd'hui, je te présente CKEditor, c'est un éditeur minimal, mais qui est de plus en plus utilisé par les forums, les sites contenant des news, et j'en passe et des plus belles ! Nos moussaillons trouvaient que l'encre noire sur nos cartes au trésor était dépassée, et qu'il fallait passer à une méthode plus jolie, et plus compréhensible lors de la création de nos cartes. En définissant la couleur par défaut de nos croix, nous avons pensé qu'il fallait une couleur plutôt claire et qui reflète de l'important, et nous avons décidé, avec cette méthode, de choisir le rouge. L'avantage avec cette méthode, c'est que les cartes se trouvant à bord du Victoria sont imagées, et colorées et c'est toujours plus attractif ! Vous savez, une carte colorée et plus détaillée permettez de trouver plus rapidement les coffres-forts de l'océan Pacifique, le but étant toujours de trouver plus vite que ces têtes-grises qui nous collent aux basques tous les jours ! Vous pouvez illustrer votre carte à votre goût, et c'est ça qui fait toute la différence ! Si votre chaloupe n'est pas assez optimisée pour ranger correctement les cartes, elle peut très vite être dépassée par les éléments et ne contenir plus aucune place pour votre hydromel ! Avant de commencer, il te faudra ton équipement matelot, sinon, tu risques de pas faire long feu face aux têtes-grises. Un éditeur de code Une cible projet qui t'encourage à continuer Une peinte d'hydromel de café Une boussole montre précise En bref... Pour commencer tu vas devoir télécharger une version de CKEditor qui te convient Ensuite, tu vas glisser le coffre "ckeditor" sur ta chaloupe dans le coffre "plugins" Puis, tu vas intégrer le coffre "plugins/ckeditor" à ta chaloupe Et pour terminer, tu devras ouvrir le coffre depuis ta chaloupe 1. Si tu as bien lu les phrases ci-dessous, tu as pu trouver les coordonnées du coffre "CKEditor" 2. Pas besoin de te dessiner une carte au trésor, un matelot se doit d'être intelligent 3. Pas besoin de te dessiner une carte au trésor, un matelot se doit d'être incorrigible 4. Tu vas créer une carte "test.php" contenant : [Hidden Content] Et normalement, tu devrais obtenir ce résultat en te rendant sur la page "test.php" si tu as choisis le "Standard Package" : Pas besoin de te faire une carte au trésor, le code est assez compréhensible en mon sens, mais je vais essayer de t'expliquer en détail et étape par étape en répondant aux possibles questions que tu aurais potentiellement posées dans les commentaires de ce sujet. 1) Télécharger le fichier Pas de panique moussaillon, je ne te demande pas de venir sur la proue avec moi, je te demande juste d'être intelligent et de cliquer au bon endroit 2) Glisser Il est important de glisser le dossier "CKEditor" afin que ce système puisse fonctionner correctement 3) test.php Se contente seulement de récupérer les valeurs des variables et de les afficher. Voici le lien de téléchargement : [Hidden Content] Bon courage Moussaillon !
  5. Hello ! Je suis nouveau, je me suis inscris sur ce forum spécialement pour vous partager ce que je fais depuis quelques jours , bien que je connaissais déjà ce forum depuis quelques temps car j'y pioche pas mal de mes ressources et regarde pas mal de tutoriaux dessus ! J'ai tenté de reproduire une partie du client d'Habbo en HTML, CSS et Javascript ! Voici ce que j'ai fait : Vue Aérienne Navigateur Catalogue (partiel) Profil Partie d'aide (pas encore faite) Je prévois d'aller plus loin et de créer les appartements par la suite mais je n'ai absolument pas les connaissances nécessaires ! PS : Actuellement il n'y a pas de php, je prévois de l'ajouter la semaine prochaine, afin que cela soit + réel. Je me suis basé sur Achille CMS, et pour le catalogue il a été partagé sur ce forum par quelqu'un d'autre. Voici les captures : EDIT 27 Mai Je n'ai absolument pas de "projet final" (d'objectif particulier), je fais uniquement cela pour me passer le temps Voilà ! En attente de vos avis précieux, vos conseils et remarques ! Bonne soirée à vous.
  6. Bonjour, Aujourd'hui je vous partage une template header Habbo que j'ai créer moi-même à l'aide de Bootstrap 4. Il est très basique Comme c'est une template vous avez seulement les fichiers js,css,images et le html. Pour le mettre sur votre CMS il faudra donc le mettre en PHP avec vos liens. Images : Cordialement, Notaryz TEMPLATE - Header Habbo 1 (BStrap).rar
  7. Salut la commu ! Je ne vous ai pas trop manqué (non) Bon je reviens avec un petit plugin : Un bouton animé en JQuery pour remonter en haut de sa page. Je sais que ce fameux bouton (aussi présent sur Habbo-Dev) à perdu de sa popularité ces derniers temps. Mais pour ceux qui veulent encore utiliser ces petits boutons, j'en ai codé un plugin pour vous ! Prévisualisation : Donc vous pouvez voir qu'il est un poil plus animé que celui d'habbo Dev. Pour commencer, comme ce plugin utilise JQuery, vous allez devoir relier JQuery à votre page, pour cela, je vous recommande de copier/coller dans le head ce code : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Dès que vous aurez fait cela, votre page sera "relié" à JQuery et sera prêt à l'utiliser. Cette étape faite, on va devoir relier le plugin en JS avec ce code : <!-- Si les deux fichiers se trouvent dans le meme repertoire --> <script src="winscroll.js"></script> <!-- Si les deux fichiers se trouvent dans un repertoire différent --> <script src="repertoire/winscroll.js"></script> Mais avant tout, vous devez télécharger le fichier en cliquant ici -> winscroll.js ou vous pouvez copier/coller le code complet qui se trouve un peu plus bas. Dès que cela est fait, il ne se passera rien, parce qu'il faut créer la balise <scroll></scroll> (moi et mon amour pour la création de balises) Mais il y a des paramètres spécifiques : <scroll fixed="true" top="0">Remonter</scroll> <!-- Ceci créra un bouton en haut de la page, l'animation ne fonctionnera pas --> <scroll>Remonter</scroll> <!-- Ceci créra un texte, si ce dernier est cliqué, la page sera remontée, l'animation ne fnctionne pas --> <scroll fixed="true" bottom="0">Remonter</scroll> <!-- Ceci créra un bouton en bas et l'animation fonctionne ! --> <scroll fixed="true" bottom="12px" right="12px">Remonter</scroll> <!-- Ceci créra un bouton à 12px du bas de la page à droite avec 12px vers la gauche, l'animation fonctionne aussi --> <!-- Vous pouvez aussi bien évidemment faire ceci : --> <scroll style="position:fixed;bottom:12px;right:12px;">Remonter</scroll> <!-- Ceci rend le meme résultat mais je trouve cela un peu plus long --> Donc en gros, dans la balise scroll, vous pouvez mettre ce que vous souhaitez, que ce soit du texte ou autre, si l'utilisateur le clique, ça remontera la page. Et remarquez aussi que l'animation fonctionne que lorsque le bouton utilise bottom, c'est juste que faire 5 animations risquerait de faire un peu long et ralentirais vos pages. Sur la vidéo plus haut, j'utilise ce code : <scroll fixed="true" bottom="22px" right="15px"> <!-- Vous pouvez insérer dans cette balise ce que vous voulez --> <img src="https://cnlovesdigital.com/wp-content/uploads/2016/04/back-to-top-button.png" style="width:70px;"> <!-- Par exemple, j'ai mis cette image de fleche vers le haut --> </scroll> Ce code donnera donc le résultat suivant : Pour ceux qui veulent juste copier/coller le code (ou juste le voir), le voici : Rapidement, si il y en a qui sont intéressés par changer la vitesse du scroll automatique, allez à la ligne 78 du fichier, ou vous pouvez voir ceci : // Animation pour le retour vers le haut, vous pouvez modifier le 700 pour la durée de scroll automatique vers le haut (en ms) $("html, body").animate({scrollTop: 0}, 700); Sachez que vous pouvez modifier le 700 pour allonger ou rétrécir la durée du scroll (1s = 1000ms) Voilà ! J’espère que ce nouveau plugin vous plaira, si je sors moins de plugins en ce moment c'est juste que je travaille sur pas mal de projets donc j'ai moins de temps à consacrer aux plugins (et en parallèle, je n'ai plus d'idées) Et bien comme d'habitude, si le plugin vous à "plu", vous pouvez toujours mettre un +1 En attendant, Bonne soirée/journée à tous et très bonne continuation ! >_Ubrain
×
×
  • Create New...