jQuery

javascript – Full Calendar Jquery UI


I’m super bad at Javascript and am trying to implement the full calendar Jquery plugin. Found here: https://fullcalendar.io/

I thought the default theme looked pretty ugly so I decided that I would make a theme using the Jquery UI ThemeRoller. Found here: https://jqueryui.com/themeroller/

According to the documentation, FullCalendar says that it supports theme roller (jquery ui) but I’m not exactly sure how to implement it. I tried adding the JS and CSS I got from the theme roller into the page with the calendar and then doing themesystem: ‘jquery-ui’ in the init for the calendar but still nothing.

Any one know how to specifically make it use Jquery-ui?

Below is my init.js file for the calendar.

$(document).ready(function() {

$("<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.7.0/fullcalendar.min.css' />").appendTo("head");

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },
    navLinks: true,
    editable: true,
    eventLimit: true, 
    events: '/schedule/data',
    themesystem: 'jquery-ui',
    cache: true,
    eventStartEditable: false,
    eventStop: function(event, delta, revertFunc){
        console.log(event);
        event_data = {
                id: event.id,
                startDate: event.start, 
                endDate: event.end
        }; 

        console.log("Now event data"); 
        console.log(event_data);
        rep = $.ajax({
            url: '/schedule/data/update', 
            data: event_data, 
            type: 'PATCH'
        })
    },
    eventClick: function(calEvent, jsEvent, view) {
        window.location.href='/schedule/appointments/'+calEvent.id+'/detail';            
    }
});

});

I would love some help with figuring this out. Thank you!



لینک منبع

javascript – Auto select dependent dropdown with jquery json


I have a dynamic and dependent dropdown below. The parent dropdown fetch the active ID from database but how to auto select the child dropdown value that is stored in the same table and set it to “selected”?

Parent Dropdown (php pdo):

<?php

$keynr = new Keynr($db);
$stmt = $keynr->read();

// put them in a select drop-down
echo "<select id='key_dropdown' class='form-control' name='keyindex' required>";
    echo "<option value=''>Wähle Schlüssel...</option>";

    while ($row_content = $stmt->fetch(PDO::FETCH_ASSOC)){
        extract($row_content);

         // current category of the product must be selected
        **if($position->keyindex==$id){
            echo "<option value='$id' selected>";**
        }else{
            echo "<option value='$id'>";
        }

        echo "$keynr - $content</option>";
    }
      echo "</select>"; 

?>

Child dropdown (Jquery):

<select id='repairkey_dropdown' name='keyindex2' class='form-control' required>
   <option value=''>Wähle Schadensbild ....</option>
</select>

<script>
$(document).ready(function(){
  //pageload
  $(function () {
    $("select#key_dropdown").change();
});
// detect change of dropdown
$("#key_dropdown").change(function(){

    // get id of selected team 
    var key_id=$(this).find(':selected').val();

        // set json url
        var json_url="keys_json.php?key_id=" + key_id;

        // get json data
        jQuery.getJSON(json_url, function(data){

            $("#repairkey_dropdown").html("");
            $("#repairkey_dropdown").append("<option value='0'>Wähle Schadensbild ....</option>");

            jQuery.each(data, function(key, val){
                $("#repairkey_dropdown").append("<option value='" + val.key_repairkey2 + "'>" + val.content + "</option>")
            });

        });
});
});
</script>

Child dropdown (Jquery Json):

<?php 
// set json headers
header("Access-Control-Allow-Methods: GET");
header('Content-Type: application/json');

$key_id=isset($_GET['key_id']) ? $_GET['key_id'] : die('Auftrags ID nicht gefunden.');

include_once '../config/database.php';
include_once '../objects/repairkeys2.php';

$database = new Database();
$db = $database->getConnection();

$repairkey2 = new Repairkey2($db);
$repairkey2->keyindex=$key_id;

$stmt = $repairkey2->readOneAdminDropDown();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($results);
?>

I´m not sure what is the best way to do this.

Thanks! 🙂



لینک منبع

jquery – JavaScript: push()ing a string into array is returning **null**


Considering the following input:

{
    "algorithm_run": "mean: 07/02/2018 02:38:09F1 (Mhz) mean",
    "id": 12,
    "parameter": "F1 (Mhz) mean",
    "runs": "2017-09-19 15:41:00(0:00:59.350000)",
    "start_time": "2017-09-19 15:41:00",
    "value": 13.5629839539749
}

Calling the following function on the URL containing that JSON:

function getScatterPlotRunData(url_string) {
    $.getJSON(url_string, function(data) {
        var graph_data = [];
        for (i = 0; i < data.length; i++) {
            graph_data.push({
                "x" : i,
                "y" : data[i].value,
                "z" : data[i].start_time
            });
        };
        drawScatterPlot(graph_data, data[0].parameter);
    });
}

The idea is to build an array with:

{
    x: index of loop,
    y: value from data[i].value,
    z: time stamp string from data[i].start_time
}

My current output is returning the time stamp as null:

{
    x: 0
    y: 13.5629839539749
    z: null
}

I’ve tried many things. Turning start_time.toString() (but it’s already a string!), calling the function on a separate environment, rewriting the whole thing.

I am not sure what I’m doing wrong here at all.

I would greatly appreciate any help. It’s probably due to a data type quirkiness that I yet don’t know, being a junior developer.

Thanks to all in advance.



لینک منبع

jquery – How to display a li at a time, once I click a button


I am trying to do that once I click the button, it displays on li and then if when I click again, it displays the following li.

<div class = "moments">
  <button>Click Here</button>
  <ul class = "uniques" type="circle">
    <li>1</li><br>
    <li>2</li><br>
    <li>3</li><br>
  </ul>
</div>

I have done this jQuery code, and it doesn’t work.

$(document).ready(function() {
  $('.moments').on('click', 'button', function() {
    $(this).closest('.moments').find('.uniques').slideDown();
  });
});

HELP ME PLEASE!! THANKS A LOT!



لینک منبع

javascript – jquery ma5slider Auto play doesn’t resume after clicking prev / next


This is First Page
This is First Page
This is First Page
This is First Page
This is First Page
This is First Page
This is First Page
This is First Page
This is First Page
This is First Page

<script>
        $(window).on('load', function () {
            $('.ma5slider').ma5slider();`
            // Methods
            $('#example-34').ma5slider('goToSlide', 3);
            // Calls
            $('#example-34').on('ma5.animationStart', function () {
                console.log('event animationStart');
            });
            $('#example-34').on('ma5.animationEnd', function () {
                console.log('event animationEnd');
            });
            $('#example-34').on('ma5.firstSlide', function () {
                console.log('event firstSlide');
            });
            $('#example-34').on('ma5.lastSlide', function () {
                console.log('event lastSlide');
            });
            $('#example-34').on('ma5.activeSlide', function (event, slide) {
                console.log( 'event activeSlide: ' + slide );
            });
            $('.ma5slider').ma5slider({
            stopAuto: false
            });
        });
    </script>



لینک منبع

jquery – Last Step in Script: Removing ARIA Attribute


Hey lovely people of Stack Overflow,

I have all but the last step figured out for this mobile menu which I adapted from https://github.com/tessalt/dropdowns. The issue is that there is no accessibility in the form of ARIA attributes, so I had to add some of my own.

I’ve gotten EVERYTHING to work as I’d like except for the fact that while I can get the aria-expanded attribute to go from “false” to “expanded” on the links, I can’t seem to toggle it back to “false” once the menu is closed.

This is a very hastily constructed jFiddle (especially the CSS part which was definitely just cut and pasted from a minified CSS file- sorry!), but I think it gives the nuts and bolts of it:

https://jsfiddle.net/pov6uqcp/

Here’s the JS code:

        $('.sub-menu').attr("aria-labelledby","mobile-submenu");

        $.fn.dropdowns = function (options) {

            var defaults = {
                toggleWidth: 768
            }

            var options = $.extend(defaults, options);

            var ww = document.body.clientWidth;

            var addParents = function() {
                $(".nav-mobile li a").each(function() {
                    if ($(this).next().length > 0) {
                        $(this).addClass("parent");
                        $(this).attr("aria-haspopup","true");
                        $(this).attr("aria-expanded","false");
                    }
                });
            }

            var adjustMenu = function() {
                if (ww < options.toggleWidth) {
                    $(".toggle-mobile-menu").css("display", "inline-block");
                    if (!$(".toggle-mobile-menu").hasClass("open")) {
                        $(".nav-mobile").hide();
                        $(".toggle-mobile-menu").attr("aria-expanded","false");
                        $('body').removeClass('static-mobile-menu');
                    } else {
                        $(".nav-mobile").show();
                        $(".toggle-mobile-menu").attr("aria-expanded","true");
                    }
                    $(".nav-mobile li").unbind('mouseenter mouseleave');
                    $(".nav-mobile li a.parent").unbind('click').bind('click', function(e) {
                        // must be attached to anchor element to prevent bubbling
                        e.preventDefault();
                        $(this).parent("li").toggleClass("open");
                        $(this).attr("aria-expanded","true");
                    });
                } 
                else if (ww >= options.toggleWidth) {
                    $(".toggle-mobile-menu").css("display", "none");
                    $(".nav-mobile").show();
                    $(".nav-mobile li").removeClass("open");
                    $(".nav-mobile li a").unbind('click');
                    $(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
                        // must be attached to li so that mouseleave is not triggered when hover over submenu
                        $(this).toggleClass("open");
                    });
                }
            }

            return this.each(function() {
                $(".toggle-mobile-menu").click(function(e) {
                    e.preventDefault();
                    $('body').addClass('static-mobile-menu');
                    $(this).toggleClass("open");
                    $(this).attr("aria-expanded","true");
                    $(this).next(".nav-mobile").toggle('500', 'linear');
                    adjustMenu();
                });
                adjustMenu();
                addParents();
                $(window).bind('resize orientationchange', function() {
                    ww = document.body.clientWidth;
                    adjustMenu();
                });
            });

        }

        $("#mobile-navigation").dropdowns();

…and the HTML code: (yup, I know it’s a ridiculously long menu, but alas this was even longer previously :S)

        <header id="site-header">  
            <div class="container">
              <div class="row align-items-center">
                <div class="col branding">
                  <a href="/">Pretend this is a logo</a>
                </div>
                <div class="col-auto mobile-menu-container">
                  <button type="button" href="#" class="toggle-mobile-menu" aria-controls="mobile-navbar" aria-expanded="false" aria-label="Toggle Mobile Navigation" style="display: none;">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="menu-name">Menu</span>
                  </button>
                </div>
              </div>
            </div>
            <nav id="mobile-navigation">
              <ul id="menu-mobile-menu" class="nav-mobile" style="display: block;">
                <li id="menu-item-249" class="about-the-council"><a href="https://staging.bcpsqc.ca/about-the-council/" class="parent" aria-haspopup="true" aria-expanded="false">About the Council</a> <small class="nav_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero et dui volutpat bibendum sed at dolor. Nunc molestie fermentum malesuada.</small>
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-333"><a href="https://staging.bcpsqc.ca/about-the-council/">Overview</a> </li>
        <li id="menu-item-250"><a href="https://staging.bcpsqc.ca/about-the-council/our-vision/">Our Vision</a> </li>
        <li id="menu-item-251"><a href="https://staging.bcpsqc.ca/about-the-council/council-members/">Council Members</a> </li>
        <li id="menu-item-252"><a href="https://staging.bcpsqc.ca/about-the-council/meet-our-team/">Meet Our Team</a> </li>
        <li id="menu-item-253"><a href="https://staging.bcpsqc.ca/about-the-council/strategic-plans-annual-reports/">Strategic Plans &amp; Annual Reports</a> </li>
        <li id="menu-item-254"><a href="https://staging.bcpsqc.ca/about-the-council/careers/">Careers</a> </li>
        <li id="menu-item-298"><a href="https://staging.bcpsqc.ca/about-the-council/partnerships/">Partnerships</a> </li>
        <li id="menu-item-299"><a href="https://staging.bcpsqc.ca/about-the-council/terms-of-reference/">Terms of Reference</a> </li>
        </ul>
        </li>
        <li id="menu-item-255" class="improve-clinical-care"><a href="https://staging.bcpsqc.ca/improve-clinical-care/" class="parent" aria-haspopup="true" aria-expanded="false">Improve Clinical Care</a> <small class="nav_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero et dui volutpat bibendum sed at dolor. Nunc molestie fermentum malesuada.</small>
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-334"><a href="https://staging.bcpsqc.ca/improve-clinical-care/">Overview</a> </li>
        <li id="menu-item-256"><a href="https://staging.bcpsqc.ca/improve-clinical-care/clear/" class="parent" aria-haspopup="true" aria-expanded="false">Clear</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-335"><a href="https://staging.bcpsqc.ca/improve-clinical-care/clear/">Overview</a> </li>
        <li id="menu-item-257"><a href="https://staging.bcpsqc.ca/improve-clinical-care/clear/clears-story/">Clear’s Story</a> </li>
        <li id="menu-item-258"><a href="https://staging.bcpsqc.ca/improve-clinical-care/clear/sign-up-for-clear/">Sign-Up for Clear</a> </li>
            </ul>
        </li>
        <li id="menu-item-259"><a href="https://staging.bcpsqc.ca/improve-clinical-care/critical-care/" class="parent" aria-haspopup="true" aria-expanded="false">Critical Care</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-336"><a href="https://staging.bcpsqc.ca/improve-clinical-care/critical-care/">Overview</a> </li>
        <li id="menu-item-260"><a href="https://staging.bcpsqc.ca/improve-clinical-care/critical-care/pain-agitation-delirium/">Pain Agitation &amp; Delirium</a> </li>
        <li id="menu-item-261"><a href="https://staging.bcpsqc.ca/improve-clinical-care/critical-care/glycemic-control/">Glycemic Control</a> </li>
        <li id="menu-item-262"><a href="https://staging.bcpsqc.ca/improve-clinical-care/critical-care/critical-care-working-group/">Critical Care Working Group</a> </li>
            </ul>
        </li>
        <li id="menu-item-263"><a href="https://staging.bcpsqc.ca/improve-clinical-care/bc-sepsis-network/" class="parent" aria-haspopup="true" aria-expanded="false">BC Sepsis Network</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-337"><a href="https://staging.bcpsqc.ca/improve-clinical-care/bc-sepsis-network/">Overview</a> </li>
        <li id="menu-item-264"><a href="https://staging.bcpsqc.ca/improve-clinical-care/bc-sepsis-network/inpatient-units/">Inpatient Units</a> </li>
        <li id="menu-item-265"><a href="https://staging.bcpsqc.ca/improve-clinical-care/bc-sepsis-network/emergency-departments/">Emergency Departments</a> </li>
            </ul>
        </li>
        <li id="menu-item-266"><a href="https://staging.bcpsqc.ca/improve-clinical-care/surgical-improvement/" class="parent" aria-haspopup="true" aria-expanded="false">Surgical Improvement</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-338"><a href="https://staging.bcpsqc.ca/improve-clinical-care/surgical-improvement/">Overview</a> </li>
        <li id="menu-item-267"><a href="https://staging.bcpsqc.ca/improve-clinical-care/surgical-improvement/surgical-quality-action-network/">Surgical Quality Action Network</a> </li>
        <li id="menu-item-268"><a href="https://staging.bcpsqc.ca/improve-clinical-care/surgical-improvement/national-surgical-quality-improvement-program/">National Surgical Quality Improvement Program</a> </li>
            </ul>
        </li>
        <li id="menu-item-269"><a href="https://staging.bcpsqc.ca/improve-clinical-care/releasing-time-to-care/">Releasing Time to Care</a> </li>
        </ul>
        </li>
        <li id="menu-item-270" class="sharpen-your-skills current_page_item current_page_parent"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/" class="parent" aria-haspopup="true" aria-expanded="false">Sharpen Your Skills</a> <small class="nav_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero et dui volutpat bibendum sed at dolor. Nunc molestie fermentum malesuada.</small>
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-339" class="current_page_item"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/">Overview</a> </li>
        <li id="menu-item-271"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/" class="parent" aria-haspopup="true" aria-expanded="false">Quality Academy</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-340"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/">Overview</a> </li>
        <li id="menu-item-272"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/faculty-advisory-committee/">Faculty &amp; Advisory Committee</a> </li>
        <li id="menu-item-273"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/faq/">FAQ</a> </li>
        <li id="menu-item-274"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/current-cohort/">Current Cohort</a> </li>
        <li id="menu-item-275"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-academy/alumni/">Alumni</a> </li>
            </ul>
        </li>
        <li id="menu-item-276"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/" class="parent" aria-haspopup="true" aria-expanded="false">Clinician Quality Academy</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-341"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/">Overview</a> </li>
        <li id="menu-item-277"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/faculty-advisory-committee/">Faculty &amp; Advisory Committee</a> </li>
        <li id="menu-item-278"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/faq/">FAQ</a> </li>
        <li id="menu-item-279"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/current-cohort/">Current Cohort</a> </li>
        <li id="menu-item-280"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/clinician-quality-academy/alumni/">Alumni</a> </li>
            </ul>
        </li>
        <li id="menu-item-281"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-forum/">Quality Forum</a> </li>
        <li id="menu-item-282"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/quality-cafe/">Quality Cafe</a> </li>
        <li id="menu-item-283"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/workshops/">Workshops</a> </li>
        <li id="menu-item-308"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/board-executive-learning-series/">Board &amp; Executive Learning Series</a> </li>
        <li id="menu-item-309"><a href="https://staging.bcpsqc.ca/sharpen-your-skills/internships/">Internships</a> </li>
        </ul>
        </li>
        <li id="menu-item-284" class="improve-culture"><a href="https://staging.bcpsqc.ca/improve-culture/" class="parent" aria-haspopup="true" aria-expanded="false">Improve Culture</a> <small class="nav_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero et dui volutpat bibendum sed at dolor. Nunc molestie fermentum malesuada.</small>
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-285"><a href="https://staging.bcpsqc.ca/improve-culture/change-ambassadors-network-bc/">Change Ambassadors Network BC</a> </li>
        <li id="menu-item-286"><a href="https://staging.bcpsqc.ca/improve-culture/cultural-safety-humility/">Cultural Safety &amp; Humility</a> </li>
        <li id="menu-item-287"><a href="https://staging.bcpsqc.ca/improve-culture/change-day/">Change Day</a> </li>
        <li id="menu-item-288"><a href="https://staging.bcpsqc.ca/improve-culture/teamwork-communication-action-series/" class="parent" aria-haspopup="true" aria-expanded="false">Teamwork &amp; Communication Action Series</a> 
            <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-342"><a href="https://staging.bcpsqc.ca/improve-culture/teamwork-communication-action-series/">Overview</a> </li>
        <li id="menu-item-289"><a href="https://staging.bcpsqc.ca/improve-culture/teamwork-communication-action-series/webinar-recordings-guides/">Webinar Recordings &amp; Guides</a> </li>
            </ul>
        </li>
        </ul>
        </li>
        <li id="menu-item-290" class="advance-the-patient-voice"><a href="https://staging.bcpsqc.ca/advance-the-patient-voice/" class="parent" aria-haspopup="true" aria-expanded="false">Advance the Patient Voice</a> <small class="nav_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis libero et dui volutpat bibendum sed at dolor. Nunc molestie fermentum malesuada.</small>
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-343"><a href="https://staging.bcpsqc.ca/advance-the-patient-voice/">Overview</a> </li>
        <li id="menu-item-291"><a href="https://staging.bcpsqc.ca/advance-the-patient-voice/patient-voices-network/">Patient Voices Network</a> </li>
        <li id="menu-item-292"><a href="https://staging.bcpsqc.ca/advance-the-patient-voice/what-matters-to-you/">What Matters to You?</a> </li>
        </ul>
        </li>
        <li id="menu-item-300"><a href="https://staging.bcpsqc.ca/resources/">Resources</a> </li>
        <li id="menu-item-301"><a href="https://staging.bcpsqc.ca/awards/" class="parent" aria-haspopup="true" aria-expanded="false">Awards</a> 
        <ul class="sub-menu" aria-labelledby="mobile-submenu">
        <li id="menu-item-344"><a href="https://staging.bcpsqc.ca/awards/">Overview</a> </li>
        <li id="menu-item-293"><a href="https://staging.bcpsqc.ca/awards/how-to-nominate/">How to Nominate</a> </li>
        <li id="menu-item-294"><a href="https://staging.bcpsqc.ca/awards/categories-criteria/">Categories &amp; Criteria</a> </li>
        <li id="menu-item-295"><a href="https://staging.bcpsqc.ca/awards/judges/">Judges</a> </li>
        <li id="menu-item-296"><a href="https://staging.bcpsqc.ca/awards/faq/">FAQ</a> </li>
        <li id="menu-item-297"><a href="https://staging.bcpsqc.ca/awards/past-winners/">Past Winners</a> </li>
        </ul>
        </li>
        <li id="menu-item-302"><a href="https://staging.bcpsqc.ca/events/">Events</a> </li>
        <li id="menu-item-303"><a href="https://staging.bcpsqc.ca/blog/">Blog</a> </li>
        <li id="menu-item-304"><a href="https://staging.bcpsqc.ca/contact/">Contact</a> </li>
                 <div class="social-icons">
                  <h6>Connect with us:</h6>
                  <ul class="social-horizontal list-inline"><li class="list-inline-item"><a href="http://www.facebook.com/bcpsqc?ref=stream" target="new"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><li class="list-inline-item"><a href="https://twitter.com/BCPSQC" target="new"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><li class="list-inline-item"><a href="https://www.linkedin.com/company/bcpsqc" target="new"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li><li class="list-inline-item"><a href="https://www.instagram.com/bcpsqc/" target="new"><i class="fa fa-instagram" aria-hidden="true"></i></a></li><li class="list-inline-item"><a href="http://www.youtube.com/bcpsqc" target="new"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li></ul>
                </div>
              </ul>
            </nav>
          </header>

I would be forever grateful to whomever could help me out!



لینک منبع

html – Jquery Remove elements including parent element


I want to remove elements from my page. I want to remove all .Panel elements which do not also have the .SelectedPanel class.

$('.Panel :not(.SelectedPanel)').remove();

I have tried the above, which works, but leaves the parent col divs – I want to remove these as well. So with the markup below, I want the middle column to be removed.

<div class='row'>                
    <div class='col-xs-6 col-sm-1'>
        <div class='Panel SelectedPanel'>
            ....
        </div>
    </div>
    <div class='col-xs-6 col-sm-1'>
        <div class='Panel'>
            ....
        </div>
    </div>
    <div class='col-xs-6 col-sm-1'>
        <div class='Panel SelectedPanel'>
            ....
        </div>
    </div>
</div>



لینک منبع

javascript – How to detect iframe content change without jquery?


I’m creating bunch of iframes and I want to detect when the content of iframe is changed.

To be precise, I set those iframes as a target to my forms and when the response is received I want to do some action.

Here’s what I’ve got:

function foo() {
    for (var i = 0; i < 5; i++) {
        createIframe(i);
        sumbitForm(i);
    }
}

function sumbitForm(page) {
    var form = document.getElementById("form");
    if (form === null) {
        form = document.createElement("form");

        form.method = "GET";
        form.action = "http://isup.me";
        form.target = "bar" + page;
        form.id = "form";

        var id = document.createElement("input"); 
        id.value = page;
        id.name = "id";
        form.appendChild(id);   

        document.body.appendChild(form);
    }
    else {
        form.id.value = page;
        form.target = "bar" + page;
    }
    form.submit();
}

function createIframe(i) {
    var iframe = document.createElement("iframe");
    iframe.name = "bar" + i;
    iframe.id = "bar" + i;
    iframe.style = "display:none;";
    iframe.load = print("load");
    iframe.onload = print("onload");
    iframe.onLoad = print("onLoad");
    document.body.appendChild(iframe);
}

function print(a) {
    console.log(a);
}

I’ve tried to set load or onload as suggested in other answers but it’s only fired when the iframe is created, not when it’s changed.

PS. I can only use pure javascript.



لینک منبع

jquery – new icon when every click in jqery


I’m trying to do chance button icon when every click in jquery. maybe it was asked question. but i dont get why not work it. Can someone help? . my code ->

html

<li class="navbar-right"><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>

jquery

    $(document).ready(function(){
        var clicks;
        for (var clicks = 1; clicks++) {
            $('.fa').click(function() {
            if(clicks%2!==0){
                $(".fa").removeClass("fa-bars");
                    $(".fa").addClass("fa-times");
            } else{
                $(".fa").removeClass("fa-times");
                    $(".fa").addClass("fa-bars");
            }
            });
        }
    });



لینک منبع

jquery – new icon when every click in jqery


I’m trying to do chance button icon when every click in jquery. maybe it was asked question. but i dont get why not work it. Can someone help? . my code ->

html

<li class="navbar-right"><a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a></li>

jquery

    $(document).ready(function(){
        var clicks;
        for (var clicks = 1; clicks++) {
            $('.fa').click(function() {
            if(clicks%2!==0){
                $(".fa").removeClass("fa-bars");
                    $(".fa").addClass("fa-times");
            } else{
                $(".fa").removeClass("fa-times");
                    $(".fa").addClass("fa-bars");
            }
            });
        }
    });



لینک منبع